webpack配置介绍
1, entry入口
module.exports = {
entry: './src/index.js' //index.js即为webpack编译入口文件
};
// 要是有多个入口, 也可以这么写
module.exports = {
entry: {
app: './src/index.js',
home: './src/home.js'
}
};
2, output输出
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；
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')
]
}
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
}
}
]
}
