webpack3 服务器loader配置-解析json和es6语法

女爷i 2021-07-24 20:19 527阅读 0赞

module
    	loaders;新版本改名为use
    	作用:例如将es6->es5 jsx->js less->css
    
    	1、在webpack.config.js文件中配置loaders
    		(1)test: 一个匹配loader要做操作的文件的一个正则表达式
    		(2)loader:loader要执行的任务的名字
    		(3)options:为loader提供一些外部选型配置
    	
    	2、json格式的数据转换成js对象(测试使用)
    		当前只是为了测试webpack 3.x版本,当前版本已经集成了json-loader;不需要再安装了
    
    		(1)安装json-loader
    			cnpm install -D json-loader
    			在json文件编写json数据,require引入模块时,原文件不需暴露直接使用,因为json格式文件不能写js导出代码
    
    		(2)、在webpack.config.js文件中添加配置
    			module:{
    				rules:[{
    					test:/\.json$/,
    					use:"json-loader"
    				}
    			]
    		}
    	3、将es6->es5
    		(1)安装依赖
    			cnpm install -D babel-core babel-loader@7.1.5 babel-preset-es2015
    			若安装babel-loader至最新版,会和babel-core不兼容
    		(2)配置webpack.config.js文件
    			在module的rules[]内添加
    			  {
    			  	test:/\.js$/,
    			  	use:"babel-loader"
    			  }

代码示例:  
webpack.config.js文件代码示例:

module.exports={ 
    	entry:__dirname+"/src/app.js",
    	output:{ 
    		path:__dirname+'/dist',
    		filename:'boundle.js'
    	},
    
    	module:{ 
    			rules:[{ 
    					test:/\.json$/,
    					use:"json-loader"
    				},
    				{ 
    					test:/\.js$/,
    					use:"babel-loader"
    				}
    			]
    		}
    }

package.json文件:

{ 
      "name": "code",
      "version": "1.0.0",
      "devDependencies": { 
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-es2015": "^6.24.1",
        "json-loader": "^0.5.7",
        "webpack": "^3.8.1",
        "webpack-dev-server": "^2.9.7"
      },
      "scripts": { 
        "build": "webpack",
        "dev": "webpack-dev-server --content-base dist --inline"
      }
    }