Webpack4.X重修之路 --- 基础篇

前言

从webpack3一路到webpack4,刚开始一直抱着搭起来能用的态度.直到开始工作,大大小小的项目接触了四五个,慢慢有了一个适合自己使用的脚手架.在开发过程中有遇到很多不顺手的地方:

由于项目需要,开发以及部署时的后台ip地址经常在变化,开发时会抽出一个单独的js文件定义所有这些外部的地址,便于管理.但是在打包之后就被webpack打包了,如果要修改地址又要重新打包,过于繁琐.
个人喜欢less,但是less不能自定义函数,以及无法定义全局的变量.比如想在variable.less中定义页面公用的一些变量,方便后期调整页面布局.但是需要在每个用到这些变量的.vue文件中单独引入,太过累赘.

慢慢的解决问题,直到我发现我的webpack.config.js居然有四五百行代码,这太乱了.于是决定重新在构造一个项目脚手架,进行优化.

重修之路

创建项目基础结构,一步一步慢慢添加

├── dist                     // 打包后目录
├── src
│   ├── assets           // 全局的静态文件,无法打包时
│   │   └── img
│   ├── config          // 数据后台IP地址配置文件
│   │   └── ip.config.js
│   └── index.js       // 入口文件
├── package.json
└── webpack.config.js   // webpack配置文件

先了解几个webpack插件

clean-webpack-plugin: 每个打包之前清理dist文件夹
copy-webpack-plugin: 复制文件或者文件夹到打包目录
html-webpack-plugin: 生成html模板以及自动引入打包后文件

我们希望assets/下的文件原封不动的复制到dist/目录下,比如有一些图片webpack无法打包时,我们就在assets下新建一个img文件夹,把这些图片放进去,打包时copy-webpack-plugin就会自动就img整个文件夹复制到dist
对于config/,打包后我希望它一样是在dist/config下.
然后我们需要在html文件中加入script标签引入dist/config目录下所有的.js文件

安装

npm i -D copy-webpack-plugin clean-webpack-plugin html-webpack-plugin

使用

const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
...
    plugins: [
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin([
            {from: 'src/config/*.js', to: 'config/', toType: 'dir', flatten: true},
            {from: 'src/assets/', toType: 'dir'}
        ]),
        new HtmlWebpackPlugin({
            inject: false,
            template: require('html-webpack-template'),
            title: '测试输出',
            appMountId: 'app',
            meta: [
                {
                    name: 'viewport',
                    content: 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
                }
            ],
            bodyHtmlSnippet: "<script src='config/ip.config.js'></script>"
        })
]
...
}

说明

clean-webpack-plugin使用是非常简单的,默认就是删除dist文件夹,安装引入之后,直接在plugins实例化即可.

copy-webpack-plugin使用

from:定义操作目标
to: 复制到dist文件夹下的哪里
toType: 类型, 文件或者文件夹`
flatten: 是否按照本来的目录复制, 默认是false

下面再说说最强大的html-webpack-plugin,会自动生成html模板,也可以以自己定义的html文件为模板

必须的参数
inject: false,
template: html文件,如果是自己定义的则是文件所在路径
可选参数
title: 标题,
appMountId: 插入的div的id
meta: meta选项
headHtmlSnippet: 插入head的html模板,这里我们需要插入config目录下所有的js文件, 所以我们需要定义一个函数,如果config目录下文件多的话我们手动一个一个去加就太浪费时间了,而且效率太低,加一个就要改一次配置

/**
 * 获取script标签字符串        
 * @param  {String} source    [源目标目录]
 * @param  {[String]} targetDir [生成的文件夹]
 * @return {[String]}           [指定文件夹下的js文件的script标签]
 */
function getConfigScript(source, targetDir) {
    let configFiles = fs.readdirSync(source, {});

    let jsFiles = configFiles.filter( file => {
        return file.indexOf('.js') !== -1;
    }) 

    let scripts = jsFiles.map( file => {
        return `<script src="${targetDir + file}"> </script>`
    })

    return scripts.join('\n');
}

改html-webpack-plugin的bodyHTMLSnippet

bodyHtmlSnippet: getConfigScript('./src/config', 'config/')

打包一下,看看我们生成的是什么

├── config
│   └── ip.config.js
├── img
│   └── test.png
├── index.html
└── js
    └── app.bundle.js

看一下index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>测试输出</title>
    <script src="config/ip.config.js"> </script>
  </head>
  <body>
    <div id="app">
    </div>
    <script src="js/app.bundle.js" type="text/javascript"></script>
  </body>
</html>

到现在我们已经成功实现了初始的基础需求了.
更多html-webpack-plugin配置

但是我们使用webpack往往不止会用来打包js还有css,img等等,如果我们都写在一个文件里的话代码就会越来越多,到最后可读性会越来越差,而且不利于阅读以及再次复用,并且开发环境以及生产环境有一些配置是不用的,所以我们将不同的配置代码拆开为dev以及prod,公用的定义为common.我们可以使用webpack-merge合并不同环境下的配置

新建一个script文件夹用来存放配置脚本, 将现在的webpack.config.js改为webpack.common.js, 新建webpack.dev.js 和 webpack.prod.js
修改npm启动脚本

  "scripts": {
    "start": "webpack-dev-server --open --config script/webpack.dev.js",
    "build": "webpack --config script/webpack.prod.js"
  }

开发模式

开启devtool的source-map便于调试
使用webpack-dev-server

// webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = merge(common, {
    mode: 'development',
    output: {
        publicPath: '/'
    },
    devtool: 'source-map',
    devServer: {
        contentBase: './dist',
        host: '0.0.0.0',
        port: 8001,
        index: 'index.html',
        open: true,
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
})

生产模式

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production'
})

webpack生产模式下会自动对js文件进行压缩混淆,但是我们还希望对图片以及css文件进行处理.