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"
}
}