webpack

发表于 | 阅读次数:

捣鼓了几天 webpack 后终于有点收获了，这里记录一下觉得比较重要的东西。

关于webpack 的安装

  1. 需要现在全局安装 webpack 才能在命令行中使用 webpack 命令
1
$ npm install -g webpack
  1. 再在项目中按装本地 webpack
1
$ npm install webpack --save-dev
  1. 在 webpack 4+ moulde 的 loaders 改用 rules 用
1
2
3
4
5
6
7
8
9
10
11
12
module: {
  rules: [{
    test: /\.html$/,
    loader: 'html-loader'
  },{
    test: /\.vue$/,
    loader: 'vue-loader'
  },{
    test: /\.scss$/,
    loader: 'style-loader!css-loader!sass-loader'// 支持多loader解析，从右到左解析文件
  },]
},

出一份最近做 vue 项目的 package.json 文件

环境是基于 node v10.14.2 、 webpack 4 、webpack-dev-server，其他依赖在当时这个时间点差不多是最新的。项目较小主要是做练习模块化和vue组件化为主要目的，没有数据交互，仅单页面跳转。但是大体的配置就是这样了，还有些没有用到的依赖，以后遇到会添加，会越来越完善的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
{
  "name": "jdfinance",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open",
    "build": "webpack --env.production"
  },
  "author": "",
  "license": "ISC",
  "eslintConfig": {
    "root": true,
    "parserOptions": {
      "ecmaVersion": 2017
    },
    "extends": [
      "mysticatea",
      "mysticatea/modules",
      "plugin:vue/recommended"
    ],
    "plugins": [
      "node"
    ],
    "env": {
      "browser": false
    },
    "globals": {
      "applicationCache": false,
      "atob": false,
      "btoa": false,
      "console": false,
      "document": false,
      "location": false,
      "window": false
    },
    "rules": {
      "node/no-extraneous-import": "error",
      "node/no-missing-import": "error",
      "node/no-unpublished-import": "error",
      "vue/html-indent": [
        "error",
        4
      ],
      "vue/max-attributes-per-line": "off"
    }
  },
  "eslintIgnore": [
    "node_modules",
    "webpack.config.js"
  ],
  "dependencies": {
    "ajv": "^6.6.1",// 是一个基于JSON-Schema的依赖包
    "clean-webpack-plugin": "^1.0.0",// 构建／打包清理dist
    "css-hot-loader": "^1.4.3",// 针对现有 css 热加载实现的问题
    "eslint-config-mysticatea": "^13.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",// 构架html文件
    "style-loader": "^0.23.1",
    "vue": "^2.5.21",
    "vue-router": "^3.0.2",
    "vue-template-compiler": "^2.5.21",
    "vue-awesome-swiper": "^3.1.3",// 基于vue的swiper插件，用着感觉还可以，结构简单，组件化调用，因为以前用的 js 的 swiper 所以比较好理解
    "webpack-dev-middleware": "^3.4.0",
    "webpack-dev-server": "^3.1.10",
    "write-file-webpack-plugin": "^4.5.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "cache-loader": "^1.2.5",
    "css-loader": "^2.0.0",
    "eslint": "^5.10.0", // 语法检测
    "eslint-plugin-vue": "^5.0.0",
    "inline-manifest-webpack-plugin": "^4.0.2", // 整理文件名
    "mini-css-extract-plugin": "^0.5.0", // 针对 webpack 4 压缩css
    "node-sass": "^4.11.0",
    "px2rem-loader": "^0.1.9",// 自适应方案 肥肠好用
    "sass-loader": "^7.1.0",
    "vue-eslint-parser": "^4.0.3",
    "vue-loader": "^15.4.2",
    "vue-style-loader": "^4.1.2",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-manifest-plugin": "^2.0.4"
  }
}

紧接上面 package.json 的一份 webpack.config.js 配置文件

因为是小项目就在单个 config 文件中配置了环境变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');

module.exports = env => {
  if (!env) {
    env = {}
  }
  let plugins = [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './app/views/index.html'
    }),
    new ManifestPlugin(), // 生成 manifest.json 的文件，便于追踪 webpack 如何输出到 bundle
    new InlineManifestWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(), // 热更新 HMRP
    new VueLoaderPlugin(),
  ];
  if (env.production) {
    plugins.push(
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"'
        }
      }),
      new MiniCssExtractPlugin({
        filename: '[name].[hash].css',
        chunkFilename: '[name].[hash].css',
      }),
    )
  }
  return {
    entry: ['./app/js/viewport.js', './app/js/main.js'],// 现在是多入口方案
    devServer: {
      contentBase: './dist',
      hot: true, // 配合 webpack.HotModuleReplacementPlugin 开启热更新
      compress: true,// gzip压缩开启
      port: 8080,// 端口号
      clientLogLevel: "none",
      quiet: true
    },
    module: {
      rules: [{
        test: /\.html$/,
        use: [
          'cache-loader',// 开启缓存
          'html-loader'
        ]
      }, {
        test: /\.vue$/,
        use: [
          'cache-loader',
          'vue-loader'
        ]
      }, {
        test: /\.(scss|css)$/,
          use: [
            env.production ? MiniCssExtractPlugin.loader : 'vue-style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                localIdentName: '[local]_[hash:base64:5]'
              }
            }, {
              loader: 'px2rem-loader',
              options: {
                remUnit: 40,
                remPrecision: 8
              }
            },
            'sass-loader'
          ]
        },
      }]
    },
    resolve: {
      extensions: [
        '.js', '.vue', '.json'
      ],
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    },
    mode: 'production',
    devtool: 'inline-source-map',
    optimization: {
      runtimeChunk: 'single', // 创建单个运行时 bundle
      splitChunks: { // 将公用的依赖模块提取到已有的 chunk 中，或者生成一个新的 chunk
        cacheGroups: { // 将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      },
    },
    plugins,
    output: {
      filename: '[name].[hash].js',
      path: path.resolve(__dirname, 'dist'),
      chunkFilename: '[name].[hash].js'
    }
  }
};

npm 安装依赖

安装环境区分

  • 安装到生产环境中 dependencies
1
2
3
4
$ npm install --save-dev file-loader

// 简写
$ npm i file-loader -D
  • 安装到开发环境中 devDependencies
1
2
3
4
$ npm install --save file-loader

// 简写
$ npm i file-loader -S

常用的依赖

url-loader 图片低于 limit 值 会自动返回 DataURL (base64)

官网文档: https://webpack.docschina.org/loaders/url-loader

安装：

1
$ npm install --save-dev url-loader

配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 一般配置
rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name].[hash:7].[ext]',
            }
          }
        ]
      }
    ]

参数说明：

参数说明来自天空影

其实最重要的就是他的这几个参数：limit、name、outputPath、publicPath

  • limit：文件大小小于limit参数，url-loader 将会把文件转为DataURL；文件大小大于limit，url-loader 会调用 file-loader 进行处理，参数也会直接传给 file-loader。

  • name：输出的文件名规则，如果不添加这个参数，输出的就是默认值：文件哈希；加上[path]表示输出文件的相对路径与当前文件相对路径相同，加上 [name].[ext] 则表示输出文件的名字和扩展名与当前相同。加上[path]这个参数后，打包后文件中引用文件的路径也会加上这个相对路径。

  • outputPath：表示输出文件路径前缀。图片经过 url-loader 打包都会打包到指定的输出文件夹下。但是我们可以指定图片在输出文件夹下的路径。比如 outputPath=img/，图片被打包时，就会在输出文件夹下新建（如果没有）一个名为img的文件夹，把图片放到里面。

  • publicPath：表示打包文件中引用文件的路径前缀，如果你的图片存放在 CDN 上，那么你上线时可以加上这个参数，值为 CDN 地址，这样就可以让项目上线后的资源引用路径指向 CDN 了

注意⚠️：第一次搭建环境的时候将 file-loader 和 url-loader 一块使用了，结果图片就破损了也没有导出 DataURL 。找原因的时候以为是配置问题，但是各种改的也不是。最后发现这两个 loader 是不能一起使用的

image-webpack-loader 图片压缩

官网文档: https://github.com/tcoopman/image-webpack-loader

安装:

1
$ npm install image-webpack-loader --save-dev

配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// 一般配置
rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true, // webpack@1.x
        disable: true, // webpack@2.x and newer
      },
    },
  ],
}]

// 具体到项的配置
rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: '65-90',
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
          quality: 75
        }
      }
    },
  ],
}]

参数对照表：

  1. mozjpeg — Compress JPEG images
  2. optipng — Compress PNG images
  3. pngquant — Compress PNG images
  4. svgo — Compress SVG images
  5. gifsicle — Compress GIF images
  6. webp — Compress JPG & PNG images into WEBP

加载数据

json的加载在 webpack 中是内置的，不需要依赖 loader。但是要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。

安装：

1
$npm install --save-dev csv-loader xml-loader

配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
rules: [
  {
    test: /.(csv|tsv)$/,
    use: [
      'csv-loader'
    ]
  },
  {
    test: /.xml$/,
    use: [
      'xml-loader'
    ]
  }
]

plugins

WebpackManifestPlugin，该插件能够在项目根目录生成一份## manifest.json的文件，通过该文件的映射关系可以让我们知道webpack是如何追踪所有模块并映射到输出bundle中的。

官方文档：https://github.com/danethurber/webpack-manifest-plugin

安装：

1
$ npm install --save-dev webpack-manifest-plugin

配置：

1
2
3
plugins: [
  new ManifestPlugin()
]

css提取压缩（生产环境使用插件）

  1. 第一种方式：

webpack 4 环境下：使用 extract-text-webpack-plugin 的测试版，因为稳定版还没有跟上 webpack 的脚步。

安装：

1
$ npm i extract-text-webpack-plugin@next -D

  1. 第二种方式：
    需要用到两种插件

提取 css 到 dist 目录下：mini-css-extract-plugin 插件 webpack 4 官方推荐插件
压缩 css:optimize-css-assets-webpack-plugin 插件

官网文档：mini-css-extract-plugin optimize-css-assets-webpack-plugin

安装 mini-css-extract-plugin

1
$ npm i mini-css-extract-plugin -D

配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    })
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      }
    ]
  }
}

安装 optimize-css-assets-webpack-plugin

1
$ npm i optimize-css-assets-webpack-plugin -D

配置：

这个插件可以接受下列配置(均为可选)：

  • assetNameRegExp: 正则表达式，用于匹配需要优化或者压缩的资源名。默认值是 /.css$/g

  • cssProcessor: 用于压缩和优化CSS 的处理器，默认是 cssnano.这是一个函数，应该按照 cssnano.process 接口(接受一个CSS和options参数，返回一个Promise)

  • canPrint: {bool} 表示插件能够在console中打印信息，默认值是true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  module: {
    plugins: [
      new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorPluginOptions: {
          preset: ['default', { discardComments: { removeAll: true } }],
        },
        canPrint: true
      }),
    ]
  }
};

关于浏览器的缓存技术（回头专门研究一下）

客户端（通常是浏览器）就能够访问网站此服务器的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为 缓存 的技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于缓存的存在，当你需要获取新的代码时，就会显得很棘手

Webpack 的静态资源持久缓存

不要在开发环境中使用 [chunkhash]，因为它会增加编译时间。区分开发和生产环境的配置，使用 [name].js 应用于开发，使用 [name].[chunkhash].js 用于生产。