webpack---webpack.config.js配置基本要素entry、output、loader、plugins等

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