1、entry入口
webpack.config.js
module.exports={
entry:'./src/index.js' //index.js即为webpack编译入口文件
};
//也可以这么写
module.exports={
entry:{
app:'./src/index.js',
home:'./src/home.js'
}
}
2、output输出
webpack.config.js
module.exports={
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:'/build'
}
}; //output配置中filename为编译文件的输出名字,path为编译文件的输出路径(绝对路径),这两项是output配置的必填项
////////其他配置选项:
output.sourceMapFilename;//map文件名,如[file].map
output.hotUpdateFunction,output.hotUpdateChunkFilename等
3、loaders加载器
loader是webpack对项目中的css、ES6等资源文件进行转换的工具,他们运行于node.js,将文件转换为新的解析文件。
如:将sass文件转换为可执行的css文件,首先安装依赖css-loader 、sass-loader、extract-text-webpack-plugin;
cnpm install --save css-loader;
cnpm install --save sass-loader;
cnpm install --save extract-text-webpack-plugin;
webpack.config.js:
const path=require('path');//路径插件
const ExtTxtPun=require('extract-text-webpack-plugin');//导出独立css文件
module.exports={
entry:'./src/index.js',
output:{
path:path.join(__dirname,'build'),
filename:'[name].js'
},
module:{
rules:[
{
test:/\.scss$/,
loader:ExtTxtPun.extract('css-loader!sass-loader')
}
]
},
plugins:[
new ExtTxtPun('[name].css')
]
}
index.js
import './a.scss';
a.scss
body{background:#000}
运行webpack命令,得到结果:
bundle目录下:main.js和main.css
4、plugins插件
webpack的插件也是一个js对象,在webpack.config.js中,plugin的使用必须new一下。
plugins:[
new ExtractTextPlugin('[name].css')//导出独立的css文件
]
5、module
module:{
rules:[
{
test:/\.scss$/,
use:["style-loader","css-loader","sass-loader"]
},{
test:/\.jsx$/,
loader:'babel-loader',
options:{
modules:true
}
}
]
}