webpack学习二

新建一个项目my-webpack-senior

初始化项目：

npm init -y

使用yarn装jquery:

yarn add jquery --save

继续安装包依赖：

yarn add webpack-cli --save--dev
yarn add webpack --save-dev
yarn add webpack-dev-server html-webpack-plugin --save-dev

其他操作按照https://blog.csdn.net/zerobaek/article/details/87117481进行

package.json文件里面的dev属性不需要加content-base是因为html-webpack-plugins插件已经将index.html加入到内存里面去了会被托管在项目的根目录（根目录是默认的托管目录）文件下面，默认会打开根目录，而根目录下面又有index.html文件就会被直接打开，所以不需要添加contentbase

配置loader：

yarn add style-loader css-loader sass-loader node-sass url-loader file-loader --save-dev

配置babel：

yarn add babel-core babel-loader@7.1.5 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 --save-dev

配置发布阶段的脚本和配置文件：

将发布阶段的配置文件命名为webpack.pub.config.js

在package.json文件的scripts属性中加上项目发布后运行的指令属性

运行npm run pub会去读取webpack.pub.config.js这个配置文件

"pub": "webpack --config webpack.pub.config.js"

会报错：

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any def

解决办法：

"pub": "webpack --config webpack.pub.config.js --mode development"

配置图片打包后存放到images中：

修改一下图片的处理规则和匹配规则，将图片放到images目录下

{ test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=669185&name=images/[hash:8]-[name].[ext]' }

每次发布前删除dist目录：

安装插件：

yarn add clean-webpack-plugin --save-dev

在配置文件中，导入每次删除文件的插件

const cleanWebpackPlugin = require('clean-webpack-plugin')

在plugins节点里面new一个cleanWebpackPlugin(["删除文件1","删除文件2",...])对象

new cleanWebpackPlugin(['dist'])

报错：

clean-webpack-plugin only accepts an options object.

修改：

new cleanWebpackPlugin()

分离第三方包:

分离第三方包有利于减少bundle.js的体积

发布思路： bundle.js 中只存放 自己的代码， 第三方包的代码，全部抽离到 另外的JS中

修改配置文件：

const webpack = require('webpack')

修改入口节点：

  entry: { // 配置入口节点
    app: path.join(__dirname, './src/main.js'),
    vendors1: ['jquery'] // 把要抽离的第三方包的名称，放到这个数组中
  }

将bundle.js文件放到js文件目录下，js文件用来存放所有打包好的js文件：

  output: {
    path: path.join(__dirname, './dist'),
    filename: 'js/bundle.js'
  }

修改插件节点：

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors1', // 指定要抽离的入口名称
      filename: 'js/vendors.js' // 将来再发布的时候，除了会有一个 bundle.js ，还会多一个 vendors.js 的文件，里面存放了所有的第三方包
    })

vendors.js文件里面存放了所有的第三方包

会报错，因为4.x版本后不支持 CommonsChunkPlugin：

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

解决办法：

optimization与plugins同级

  optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                name: "vendors1",
                chunks: "initial",
                minChunks: 2
            }
        }
    }
  }

压缩JS代码：

    new webpack.optimize.UglifyJsPlugin({
      compress: { // 配置压缩选项
        warnings: false // 移除警告
      }
    }),
    new webpack.optimize.DedupePlugin({ // 设置为产品上线环境，进一步压缩JS代码
      'process.env.NODE_ENV': '"production"'
    })

会报错，因为4.x版本后不支持 UglifyJsPlugin ：

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

解决办法：

安装

yarn add uglifyjs-webpack-plugin --save-dev

在配置文件中导入插件：

const UglifyJsPlugin = require("uglifyjs-webpack-plugin")

minimizer与splitChunks同级

    minimizer: [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: true, // Must be set to true if using source-maps in production
        })
    ],

继续报错：

webpack.optimize.DedupePlugin is not a constructor

解决办法：

移除即可

继续报错：

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

解决办法：

yarn add extract-text-webpack-plugin@next --save-dev

压缩HTML页面：

    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html',
      minify: {
        collapseWhitespace: true, // 合并多余的空格
        removeComments: true, // 移除注释
        removeAttributeQuotes: true // 移除 属性上的双引号
      }
    })

minify的其他优化项

抽取样式表文件并处理CSS路径：

因为bundle.js里面还会包含css文件，这也会影响bundle.js文件的体积

安装插件

yarn add extract-text-webpack-plugin --save-dev

导入抽取CSS的插件

const ExtractTextPlugin = require("extract-text-webpack-plugin")

在插件节点中加入，把抽取出的css文件放到css目录下面

new ExtractTextPlugin("css/styles.css")

将抽取出的css文件放到css目录下面，这样做也会影响放在images下面的图片，因为会影响路径，解决办法：

修改第三方文件匹配规则

      {
        test: /\.css$/, use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader",
          publicPath: '../' // 指定抽取的时候，自动为我们的路径加上 ../ 前缀
        })
      },
      {
        test: /\.scss$/, use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
          publicPath: '../' // 指定抽取的时候，自动为我们的路径加上 ../ 前缀
        })
      }

压缩CSS文件：

安装插件

yarn add optimize-css-assets-webpack-plugin --save-dev

导入压缩CSS的插件

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

在插件节点中加入

new OptimizeCssAssetsPlugin()

访问dist下面的index.html，最终会得到这个页面

其余补充可以看看这个文档https://blog.csdn.net/harsima/article/details/80819747