玩转webpack配置，轻松入门

一、理论篇

在工作中我们接触到最多的webpack配置项，就是vue或者react脚手架搭建出来的环境，通过下载官方脚手架，然后按照提示一步一步操作，最终会生成如下结构目录(部分文件是我手动添加的)

 里面配置项及其繁多，如果想要自己再手动配置类似开发环境，难免会让人望而却步。

进入正题，什么是webpack？看官方是如何描述的

“webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。”

官方意思很直白，就是个模块打包器，以vue官方脚手架为例，它都做了哪些配置呢？

部分截图

 看其配置文件，vue脚手架配置文件大致做了如下操作

入口配置：浏览器打开一开始要执行的文件

输出配置：npm run build 执行命令最终打包后文件输出的位置

模块加载：js 图片 scss/css 字体 媒体文件 等，这些文件webpack是不会自动识别的，这里需要我们下载插件去配置它，告诉webpack如何加载这些不同类型的文件（vue脚手架基本上的配置都处理好了，所以配置会觉得配置多）

插件配置：如mini-css-extract-plugin这个插件， 是用来提取网页以<style>***</style>这种方式加载的样式，最终提取的内容会打包到.css文件，以文件方式加载到网页中 

打包优化配置：这里配置空间比较大，意思就是项目优化

分环境打包：如哪些插件是在生产环境运行的，哪些是在开发环境配置的，哪些是共同的配置或者说基础的配置，于是就有了这个三个文件 webpack.base.config.js(生产和开发环境共同的配置),webpack.dev.config.js(开发环境的配置) webpack.prod.config.js(生产环境的配置)

可能还有其他配置，先列举这么多，说白了，webpack就是一个没有手和脚的机器人，我们需要让它给我们工作干活，我们就需要给他安装手和脚，这些手和脚我们可以随意生产随意开发，然后让机器人自己去适配，随意开发的前提是我们需要遵循他们制定的规则

用一句话总结webpack的配置，你要让他干什么，你就需要给他配置什么

接下来，我们先让webpack干一个最简单的活，让他运行一个最简单的网页及打包一个最简单的网页

 

 

二、实践入门篇 - 最简单的开发环境及打包环境搭建

当前机器环境

node 12.10.0

webpack 5.64.1

webpack-cli 4.9.1

webpack-dev-server 4.5.0

项目开始之前，用npm 安装下cnpm，  npm install -g cnpm -registry=https://registry.npm.taobao.org ，之后就用cnpm install xxx安装插件，这样会快一些

1、新建demo文件夹(项目文件)，执行 `npm init` 一路回车，然后demo文件夹下会出现一个`package.json`文件夹

package.json

package.json 最简单初始化之后就长这样，这个文件之后会用到，里面包含打包和运行命令，还有就是项目依赖(插件)，有了这个文件之后以后要把项目迁移至别的文件夹，不用把插件一起迁移过来，直接执行 cnpm install ，程序就会根据package.json 这个文件安装依赖(插件)

 

2、根目录新建一个`index.html`

这个是一个默认html模板，里面啥也没有，等你配置好入口文件之后，webpack会把相应的js插入到该文件中，所以我们不用动它，把它想象成是一个占位文件

 

3、根目录下新建`index.js`

先把这个文件当成入口文件，到目前为止，我们还没给webpack添加任何配置，

理论上来说，我们需要实现 执行`npm run start` 这个命令之后，在浏览器窗口输入localhost:3000，我们就能看到控制台有`demo`字符串，body中插入一个div，内容是`demo`

 

开始配置webpack之前

我们先来了解几个webpack运行时必须要用到的插件

webpack-dev-server：它是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务

html-webpack-plugin：该插件将为你生成一个 HTML5 文件,在 body 中使用 script 标签引入你所有 webpack 生成的 bundle

webpack：webpack运行必须插件

webpack-cli：webpack运行必须插件

先把它们全部安装上，`cnpm install webpack-dev-server html-webpack-plugin webpack webpack-cli --save-dev` 

科普一个小知识 --save-dev 和 --save的区别

npm install xx --save 这个安装方式程序会打包到项目里面 如 vue.js vue-router vuex 这种插件就需要用这种方式安装，因为它是网页运行必须文件(前提项目用到了这些框架)

npm install xx --save-dev 这个命令多了一个dev，开发环境的意思，如webpack-dev-server 等上面的插件，这个是webpack所依赖的插件，当项目打包完之后，项目就变成了一个网页程序，就不在需要这些插件了

 

正式开始配置，就两步

第一步、配置webpack.base.config.js

根目录新建一个`build`文件夹，在build文件里新建`webpack.base.config.js`

mode：必须填写，可以为development(开发模式)或者production(生产模式)，区别在于development代码是处于调试中，代码量大，里面包含了很多编译信息，而production这种模式实用于打包，代码是被简化压缩过的

devServer：是对webpack-dev-server这个插件的配置，只在开发模式有效，就是常输入localhost:3000能看到页面效果，就这个简单配置就能启动一个微服务

plugins：插件配置都会在这里 而HtmlWebpackPlugin是对html-webpack-plugin这个插件的配置，配置之后插件会把入口文件编译好的js插入到当前配置的index.html中

 

第二步、命令配置

在`package.json`文件里的"script"对象中新增一行代码

 "start": "webpack-dev-server --config build/webpack.base.config.js"

翻译：执行npm run start命令，会启动webpack-dev-serve这个服务，走build/webpack.base.config.js文件配置

 

目录终结构

执行命令 `npm run start`，运行结果

此刻，项目开发环境算是正常跑起来了，现在需要简单配置下，将项目打包

 

配置打包环境，easy

在`package.json`文件里的"script"对象中新增一行代码

"build": "webpack --env production --config build/webpack.base.config.js" 

翻译：执行npm run build命令，运行webpack 走build/webpack.base.config.js命令，其中我还带了参数 env=production 

修改文件`build/webpack.base.config.js`

上一步中，在命令行中携带了一个参数 --env production ，告诉配置要走生产环境，然后在配置文件中去接受这个参数，env.production返回的是true，即mode值为production

此时，我们执行打包命令`npm run build`，dist文件内容及运行结果如下

目前为止，最简单的webpack配置已经搭建完成

 

三、进阶篇 - 搭建最简单的vue开发环境

搭建之前，先分析下vue开发主要会做什么？

图片加载、scss加载、css加载、js加载、es6编译成es5、.vue文件解析 、vue、vue-router、样式提取到css文件中

之前说过，webpack的干的每一件事，都要我们指派给他，所以上面的配置自然不会少

接下来我们开发一个渐进式的vue开发环境，就先来个最简单的vue开发环境吧

 

第一步、安装vue开发环境必须插件

vue、vue-router、.vue-loader(vue加载器)、vue-template-compiler(vue 模板解析器)，执行下面命令

cnpm install vue vue-router --save  vue和vue路由

cnpm install vue-load vue-template-compiler  --save-dev  .vue、.js文件加载器和vue模板解析器

看下package.js文件中是否添加了这些这些内容

 

第二步、配置webpack.base.config.js

在webpack.base.config.js新增下面红框内容

引入vue-loader插件

const VueLoaderPlugin = require('vue-loader/lib/plugin')

使用插件

额外再配置一些内容

resolve配置之前引用文件

import home from './../views/home.vue' //加了.vue后缀

resolve配置之后引用文件

import home from './../views/home' //没有加.vue后缀，webpack自己会加上

module中的rules就是加载器的解析规则，告诉webpack，遇到.vue结尾的文件，使用vue-loader来加载 ，new VueLoaderPlugin() 是使用插件

 

第三步、 新建.vue文件、vue路由文件、在入口文件中把初始化Vue，把路由和.vue文件衔接起来

看文件路径，没有的文件夹需要自己建

1、新建文件src/views/home.vue

<template>
  <p>home page</p>
</template>

<script>
export default {
name: "home.vue"
}
</script>

<style scoped>

</style>

2、新建src/router/index.js

import Vue from 'vue';
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
    routes: [
        {
            name: '',
            path: '/',
            component: resolve => require(['./../views/home.vue'], resolve),
        }
    ]
})　　

3、新建src/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
name: "App.vue"
}
</script>

<style scoped>

</style>

4、把demo/index.js文件移动到demo/src/index.js中，同样把webpack.base.config.js文件入口引用路径改一下

5、清空demo/src/index.js内容，修改如下

import Vue from 'vue';
import router from './router'
import App from './App'
new Vue({
    router,
    render:h=>h(App)
}).$mount('#app')

项目完整目录

到目前为止，最简单的vue环境搭建完成，这时可以使用 `npm run start` 启动项目，同时也可以尝试`npm run build` 同样也可以打包成功

运行结果如下

 

到目前为止，webpack算是能识别你的vue项目了，但现在配置太过薄弱，如你在项目中引入图片 css、scss等一些东西，webpack会识别不了便会报错，接下来一起给他安装上活力四支，让它奔跑起来

 

四、插件篇，让webpack起飞

现在我们让webpack像vue官方脚手架一样，能够图片加载、scss加载、css加载、js加载、es6编译成es5、样式提取到css文件中

vue-style-loader

cnpm install vue-style-loader --save-dev //插件安装

vue-style-loader 解析vue文件中的style标签包裹的样式，不支持sass写法，仅支持css写法

在webpack.base.config.js配置

 

css-loader

cnpm install css-loader --save-dev //支持在style中@import 'xx' 引入 也支持在.vue中 import 'xx.css'引入

让vue或js文件 支持引入css文件

在webpack.base.config.js中配置

 

sass-loader node-sass

cnpm install sass-loader node-sass --save-dev //编译sass，webpack默认使用node-sass进行编译，所以需要同时安装sass-node

让vue中style标签允许使用sass样式及允许引入scss文件

在webpack.base.config.js中的配置

 

url-loader

cnpm install url-loader --save-dev 

在项目中支持可加载图片，css中的背景图片及img标签图片方式引入，同类型的插件file-loader 有兴趣可以研究下

在webpack.base.config.js中的配置

{
    test: /\.(png|jpg|jpeg|gif)$/i,
    exclude: /node_modules/,
    use: [
        {
            loader: "url-loader",
            options: {
                limit: 1024,//小于1024字节的图片，以base64方式打包到标签中，建议设置
                name: '[name].[hash:7].[ext]',
                outputPath: 'static/images/',
                publicPath: './../../',
                esModule:false //这里需要设置false，不然在 img标签引入时，图片会加载不出来
            }
        },
    ],

} 

 

mini-css-extract-plugin

cnpm install mini-css-extract-plugin --save-dev //css样式提取

.vue文件中的样式提取，打包成.css文件

这里有个比较重要的点，mini-css-extract-plugin与vue-style-loader只能使用一个，意思就是你用了mini-css-extract-plugin提取css，就无需vue-style-loader了，类似mini-css-extract-plugin包含了vue-style-loader

引用mini-css-extract-plugin

在webpack.base.config.js中的配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

 使用插件

 

clean-webpack-plugin

清空文件夹，默认清空./dist

在webpack.base.config.js中的配置

cnpm install clean-webpack-plugin --save-dev //安装插件

const {CleanWebpackPlugin} = require('clean-webpack-plugin') //引用插件

plugins: [
    new CleanWebpackPlugin(), //使用插件
]

 

copy-webpack-plugin

将单个文件或整个目录复制到构建目录

cnpm install copy-webpack-plugin  --save-dev //插件安装

const CopyPlugin = require('copy-webpack-plugin'); //插件引用

plugins: [
    //使用方式
    new CopyPlugin({
        patterns: [
            {from: "manifest.json"},
            {from: "static", to: "static"},
        ],
    }),
]    

 from：源代码目录 to：构建目标目录，默认copy到构建文件的根目录

 

webpackbar

打包显示进度条

cnpm install webpackbar --save-dev //安装插件

const WebpackBar = require('webpackbar')
plugins: [
        new WebpackBar()
    ],

 

friendly-errors-webpack-plugin

 清除多余的构建信息及构建成功后展示自定义信息

cnpm install friendly-errors-webpack-plugin --save-dev //安装

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');//引用
//使用
plugins: [
    new FriendlyErrorsWebpackPlugin({
        compilationSuccessInfo: {
            messages: ['You application is running here http://localhost:3000']
        },
        clearConsole:true
    })
],
stats: 'errors-only' //只显示错误信息

 

webpack-bundle-analyzer

 打包分析工具，可以知道打包后的文件中主要包含了哪些JS

cnpm install webpack-bundle-analyzer --save-dev 

在webpack.base.config.js中的配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin //引入
//使用
plugins: [
    new BundleAnalyzerPlugin()
]

五、附加篇

实时编译文件，我把它叫作内存文件实体化

"watch": "webpack --watch --config build/webpack.dev.conf.js"

翻译：执行npm run watch webpack走build/webpack.dev.config.js配置，监测文件改动，实时编译项目，输出文件与打包文件一样，这里重要提示下，wath中要走开发环境配置，不然编译会变得很慢

通俗的就是我改动项目代码，项目实时打包，目前来看，这种编译方式使用场景少见，但是非常之有用，说个使用场景 浏览器扩展开发

浏览器扩展开发它有自己的文件结构，我们必须遵循它的规则去开发扩展

实时打包目录结构与源代码目录结构对比

 插件开发需要用到已打包好的代码，插件开发也需要实时调试，如果不用watch，也就意味着每次改动代码预览效果都要手动打包，效率极低，webpack 附带的watch模式就解决了这种困扰，改动文件实时打包，速度还快

 

单页多路口配置

entry: ['./../src/index.js','./../src/popup.js']

plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../index.html'),
        filename: "index.html",
    })
]

index.js popup.js 会插入到index.html页面中，形成多入口

 

多页多入口配置

entry: {
    index: ["@babel/polyfill", path.resolve(__dirname, './../src/index.js')],
    popup: ["@babel/polyfill", path.resolve(__dirname, './../src/popup.js')],
}

plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../popup.html'),
        filename: "popup.html",
        chunks: ['popup']
    }),
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../index.html'),
        filename: "index.html",
        chunks: ['index']
    })
]

chunks的配置项与entry对象中的key相互联系，上面配置对应的入口index.js会插入到index.html页面中，相应的popup.js会插入到popup.html页面中