工欲善其事，必先利其器。webpack就是前端开发的一个利器。下面是一些自己学习过程中的笔记，欢迎交流。
在前端开发中，我们为什么需要使用webpack呢，简单总结一下，比较直接的原因有两点：
- 代码压缩打包
- 开发中的热更新
在现在的前端开发中，我们需要依赖大量的第三方代码库，通过webpack这样的打包工具，我们可以方便的管理各个依赖。而配合webpack-dev-server这样的插件，即使你只是平常做一些前端的练习，也能大大提高你的学习效率。
基础配置
下面是一个快速的配置文件，可以用作日常的前端学习练习时使用（webpack2）：
var path = require("path");
module.exports = function() {
return {
entry: {
main: "./src/app.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css$|\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
options: {
presets: ["es2015"]
}
}
]
}
]
}
};
};
这个配置包含了两个功能：
- CSS文件预处理，同时支持SCSS
- JavaScript文件打包到
dist/bundle.js
现在，来看一下怎么使用这份配置文件，在你的本地文件夹运行：
# 初始化项目并生成package.json文件
npm init
# 新建webpack.config.js文件，再复制配置到文件中，并安装webpack和webpack-dev-server插件和其他用到的加载器：
npm install --save-dev webpack webpack-dev-server css-loader style-loader
npm install --save-dev sass-loader node-sass
接下来，给npm添加命令：
"script": {
start: "webpack-dev-server --open"
}
现在，在命令行运行
npm run start
成功（此时默认你已经在你的文件夹中建立index.html入口，并且在html中引入了/bundle.js）！
此时，会自动打开浏览器跳转到index.htl。
webpack-dev-server的作用？
提供了一个本地的开发server，并且有live reload的功能，也就是，你在编辑器里更改了CSS或者JavaScript之后，浏览器中的网页就自动刷新了。
下面详细解释一下配置文件中各部分代码的作用：
entry:这是你的应用的入口点参数，webpack从这里给的文件开始解析你的代码，你也可以定义多个入口点
output:这是处理后的文件存放的参数。
module:你的代码中需要使用的加载器配置，配置中，test可以使用正则表达来检测文件名，以确定是否使用当前的加载器
完整的配置文件可以参考：https://webpack.js.org/configuration/
使用CommonsChunkPlugin
- 为什么？
在代码中，一些引入的第三方代码，如果和自己的代码混合在一起打包，那么每次生成代码，都会生成新的打包文件。为了提高网站的加载速度，我们需要利用浏览器的缓存，一些第三方的代码库不需要每次都生成新的压缩代码，而是缓存在浏览器中，下次使用直接从浏览器加载。为了分离我们自己的代码和第三方的代码，或者一些类似的场景，我们需要使用CommonsChunkPlugin
下面是一个官方的配置文件
entry: {
main: './index.js' //Notice that we do not have an explicit vendor entry here
},
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
//CommonChunksPlugin will now extract all the common modules from vendor and main bundles
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
})
]
在这个文件中，使用了两次CommonsChunkPlugin插件，而entry只有一个main。那么，如果分离特殊的代码呢？
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
在这里，minChunks是一个函数，插件通过这个函数来判断当前的chunk是否是符合条件。如果符合条件，就通过这个CommonsChunkPlugin，把当前chunk分离出去，如果不符合条件，那么第二个CommonsChunkPlugin就处理这个chunk。这样，当你的代码变动，由于vender的代码已经分离了，所以变动之后，重新打包，webpack并不会对vender的代码重新打包。
网友评论