当下常用的webpack版本_带你走进webpack世界，成为webpack头号玩家，分享前端学习资料...

前段时间《头号玩家》刷爆了朋友圈，斯皮尔伯格一个资深电影导演，把对过去经典的致敬，对未来的憧憬浓缩在这一部电影中，可以说让观众燃了起来。

观望整个前端开发，不断的演化，发展迅速。前端开发从最开始切页面, 前端自动化构建工具日新月异，从最初的Grunt,Gulp到现在前端项目可以说标配的webpack。

我们先来致敬经典:

本文目录

1. 什么是webpack?

可以看做一个模块化打包机，分析项目结构，处理模块化依赖，转换成为浏览器可运行的代码。

• 代码转换: TypeScript 编译成 JavaScript、SCSS,LESS 编译成 CSS.
• 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片。
• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
• 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
• 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。

构建把一系列前端代码自动化去处理复杂的流程，解放生产力。

2. 进入webpack世界

初始化项目

npm install webpack webpack-cli -D复制代码

webpack4抽离出了webpack-cli,所以我们需要下载2个依赖。

Webpack 启动后会从Entry里配置的Module开始递归解析 Entry 依赖的所有 Module。 每找到一个 Module， 就会根据配置的Loader去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。 这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

webpack需要在项目根目录下创建一个webpack.config.js来导出webpack的配置,配置多样化,可以自行定制,下面讲讲最基础的配置。

module.exports = {entry: './src/index.js',output: {path: path.join(__dirname, './dist'),filename: 'main.js',}}复制代码

• entry代表入口，webpack会找到该文件进行解析
• output代表输入文件配置
• path把最终输出的文件放在哪里
• filename输出文件的名字

有时候我们的项目并不是spa，需要生成多个js html，那么我们就需要配置多入口。

module.exports = {entry: {pageA: './src/pageA.js',pageB: './src/pageB.js'},output: {path: path.join(__dirname, './dist'),filename: '[name].[hash:8].js',},}复制代码

entry配置一个对象，key值就是chunk： 代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。看看filename[name]: 这个name指的就是chunk的名字，我们配置的key值pageA pageB，这样打包出来的文件名是不同的，再来看看[hash]，这个是给输出文件一个hash值，避免缓存，那么:8是取前8位。

这里有人会有疑问了，项目是多页面的，应该有pageA.html``pageA.js``pageA.css, 那么我应该生成多个html，这个只是做了JS的入口区分，我不想每一个页面都去复制粘贴一个html,并且html是大部分重复的，可能不同页面只需要修改title,下面来看看这个问题怎么解决:

需要引入一个webpack的plugin:

npm install html-webpack-plugin -D复制代码

该插件可以给每一个chunk生成html,指定一个template,可以接收参数，在模板里面使用，下面来看看如何使用:

const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: {pageA: './src/pageA.js',pageB: './src/pageB.js'},output: {path: path.join(__dirname, './dist'),filename: '[name].[hash:8].js',},plugins: [ new HtmlWebpackPlugin({ template: './src/templet.html', filename: 'pageA.html', title: 'pageA', chunks: ['pageA'], hash: true, minify: { removeAttributeQuotes: true } }), new HtmlWebpackPlugin({ template: './src/templet.html', filename: 'pageB.html', title: 'pageB', chunks: ['pageB'], hash: true, minify: { removeAttributeQuotes: true } }),]}复制代码

在webpack中，插件的引入顺序没有规定，这个在后面在继续详说。

• template: html模板的路径地址
• filename: 生成的文件名
• title: 传入的参数
• chunks: 需要引入的chunk
• hash: 在引入JS里面加入hash值 比如:
• removeAttributeQuotes: 去掉引号，减少文件大小
• 具体文档

这样在dist目录下就生成了pageA.html和pageB.html并且通过配置chunks，让pageA.html里加上了script标签去引入pageA.js。那么现在还剩下css没有导入，css需要借助loader去做，所以现在要下载几个依赖，以scss为例，less同理

npm install css-loader style-loader sass-loader node-sass -D复制代码

• css-loader: 支持css中的import
• style-loader: 把css写入style内嵌标签
• sass-loader: scss转换为css
• node-sass: scss转换依赖

来看看如何配置loader

module.exports = {module: { rules: [ { test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], exclude: /node_modules/ } ] }}复制代码

• test: 一个正则表达式，匹配文件名
• use: 一个数组，里面放需要执行的loader，倒序执行，从右至左。
• exclude: 取消匹配node_modules里面的文件

如果想把css作为一个单独的文件，需要用到一个插件来做(webpack4.0.0以上版本需要next版本):

 npm i extract-text-webpack-plugin@next -D复制代码const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {entry: './src/index.js',output: {path: path.join(__dirname, './dist'),filename: 'main.js', }, module: { rules: [ { test: /.scss$/, use: ExtractTextPlugin.extract({ // style-loader 把css直接写入html中style标签 fallback: 'style-loader', // css-loader css中import支持 // loader执行顺序 从右往左执行 use: ['css-loader', 'sass-loader'] }), exclude: /node_modules/ } ] }, plugins: [ new ExtractTextPlugin('[name].[contenthash:8].css'), ]}复制代码

• 需要在plugins里加入插件name: chunk名字 contenthash:8: 根据内容生成hash值取前8位
• 修改loader配置下的use: fallback: 兼容方案

这样就实现了js,html,css的打包，那么再来看看一些常用的loader:

• babel-loader: 用babel转换代码
• url-loader: 依赖于file-loader,把图片转换成base64嵌入html,如果超出一定阈值则交给file-loader

rules: [ // 处理js { test: /.js?$/, exclude: /node_modules/, use: ['babel-loader'] }, // 处理图片 { test: /.(png|jpg|gif|ttf|eot|woff(2)?)(?[=a-z0-9]+)?$/, use: [{ loader: 'url-loader', options: { query: { // 阈值 单位byte limit: '8192', name: 'images/[name]_[hash:7].[ext]', } } }] },]复制代码

babel的配置建议在根目录下新建一个.babelrc文件

{ "presets": [ "env