最近花了两周的休息时间学习了webpack，能够可以编写自己项目所需要的配置文件，总体来说webpack是一种非常优秀的前端模块化的打包工具，非常值得花时间来研究学习。
什么是webpack，它的出现是为了解决什么问题？
webpack是一种可以融合各种前端新技术的平台，我们只需要简单地配置就可以使用jsx和typescript等一些前端新语法，得益于社区的发展，当我17年第一次接触webpack的时候，还都是英文文档，现在已经有很多优秀的中文入门教程和工程实践
我们开始配置我们的webpack.config.js
主要的api
1、entry（项目入口）
字符串，如entry:"./src/index.js"
数组形式： 如entry:[react, react-dom],可以把数组中的多个文件打包转换为一个chunk
对象形式，如果需要配置的是多页的应用，或者我们哟啊抽离出指定模块作为指定公共代码，需要采用这种形式，属性名是占位符[name]的值
如：
entry: {
main:'./src/index2.js',
second: './src/index2.js',
vendor:['react', 'react-dom']
}
2、output（出口文件）
会告诉webpack在哪里输出所创建的bundle.js以及如何命名
out：{
path:path.join(__dirname, './dist'),
name: 'js/bundle-[name]-[hash].js,
chunkFilename: 'js/[name].chunk.js',
publicPath:'/dist/'
}
3、module（模块的处理）
webpack只能处理js文件，浏览器也可能不识别一些最新的js语法，所以我们就要对传入的模块做一些预处理，这就涉及到了webpack的又一核心概念“loader”’
loader的作用和基本用法
webpack中，loader的配置主要在module.rules中进行，这是一个数组，每一个rule做了两件事
- 识别文件类型，来确定具体处理该数据的loader(Rule.test属性)
- 使用相关的loader对文件进行相关的操作转换(Rule.use属性）
比如我们想要处理react中的jsx语法
module: {
rules:[{
test: /(.jsx|.js)/, //表示匹配规则，是一个正则表达式
use:{ //表示针对匹配文件将使用处理的loader
loader: "babel-loader",
options: {
presets: ["es2015", "react"]
}
}
}]
}
常用的loader：
转换编译：script-loader, babel-loader,ts-loader,coffee-loader
处理样式：style-loader,css-loader,less-loader,sass-loader,postcss-loader
处理文件：raw--loader,url-loader,file-loader
处理数据：csv-loader,xml-loader
处理模板语言：html-loader,pug-loader,jade-loader,markdown-loader
清理和测试：mocha-loader,eslint-loader
此外还有许多loader，可以到loader文档里查询
4、plugin（loader不能做的处理都能交给plugin来做）
const CleanWebpackPlugin = require("clean-webpack-plugin")
{
...
plugin:[
new webpack.DefinePlugin({
"process.env" : {
NODE_ENV: JSON.stringify("production")
}
}),
new CleanWebpackPlugin(["js"], {
root: __dirname + "/stu/",
verbose: true,
dry: false
})
]
}
一种插件就是一种函数，通过传入不同的参数，可以实现不同的功能，webpack让人觉得难学的地方之一是哟啊自己封装plugins，对于我们大多数人来说，需要掌握的plugins并不是那么多，用的时候再查就可以
5、一些辅助开发的相关属性
devtool:打包后的代码和原始代码存在较大的差异，此选项控制是否生成以及如何生成sourcemap
devserver：通过配置devserver选项，可以开启一个本地服务器
watch：启用watch模式后，webpack将持续监听热河已经解析文件的更改，开发是开启会很方便
watchoption：用来定制watch模式的选项
performance：打包后命令行如何展示性能提示，如果超过某个大小是警告还是报错
对于webpack配置，要区分开发环境还是产环境
下面是文档的建议
我们为了避免重复应该提取公共代码
所以一般有这么几个文件
webpack.config.js
webpacl.dev.js
webpack.prod.js
webpack.common.js
此外还有单独配置babel的文件babelrc，webpack可以自动识别
如果大家想跟着配置一个webpack.config.js文件，可以参考入门webpack，看这篇就够了
还有文档可以仔细看一下webpack中文文档