webpack系列（一）webpack及其loader、plugin的使用
Published by Shangyu Liu,
webpack是什么：
webpack是模块化解决方案，js不是模块化语言，但有amd、commonjs、ES6等支持模块化，webpack其实是用来支持模块化的工具，与前端自动化工具gulp/grunt不同，后者能够优化前端的开发流程，用来压缩、合并代码，处理LESS、SASS等文件。
webpack使用：
1、全局本地都要装一下webpack，否则的话使用webpack命令需要加本地的路径
2、webpack是在npm环境中使用，可以使用命令：webpack entry.js bundle.js；也可以在package.json中的scripts配置一个mypack的命令为前面所述的webpack命令，然后webpack会根据nodejs的依赖策略进行打包，从entry.js开始寻找依赖，如图所示
3、webpack配置文件，上述使用webpack的方式可以改进一步，将配置信息放到配置文件中，命名为webpack.config.js，webpack会自动调用该文件，此文件遵循nodejs的语法：
module.exports = {
entry: __dirname + "输入目录/输入文件.js",
output: {
path: __dirname + "输出目录",
filename: "输出文件.js"
}
}
这样只需要webpack命令即可打包，也可以将webpack命令设置到scripts中。
4、bundle文件是几乎不可读的，需要与源文件对应才能调试，webpack提供了调试的功能，只需要在webpack.config.js配置devtool属性即可，可选值及其作用为：
5、server配置，可以安装webpack的devserver：npm install —save-dev webpack-dev-server，在配置文件中配置:
devServer:{
contentBase:"加载目录",
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
6、上述配置只能编译nodejs（commonjs规范）语法的js代码，ES6的编译需要webpack的额外插件，但是webpack中plugin和loader是两种概念，这里说的是loader，loader是处理单个文件的，plugin则是对webpack的扩展。loader的配置在module中：
module: {
rules: [
{
test: /\.scss$/,
use:[{
loader: "style-loader"
},{
loader: "css-loader"
},{
loader: "sass-loader"
}
],
exclude:/node_modules/
},
{
test: /\.js$/,
use:[{
loader: "babel-loader",
options: {
presets: ["es2015"]
}
}
],
exclude:/node_modules/
}
]
然后在main.js中require scss文件即可，此处仅有scss，css仅需要前两个loader即可。
7、plugin
在配置文件的plugins中进行配置，plugins对象的值是个数组，数组中的元素是plugin的一个实例：
plugins: new ThePlugin(options)