webpack构建技巧之生产篇

本文接前篇 webpack构建技巧之开发篇，但可独立使用。

项目目录：

一、入口

入口与开发篇相同

function resolve(dir) {
  return path.join(__dirname, '..', dir) //返回的是项目目录下的文件夹
} 
module.exports = {
  entry: resolve('src/main.js')
}

二、出口

出口与开发篇有点差别

  output: {
    path: resolve('dist'),
    filename: 'static/js/[name].[hash:8].js',
    chunkFilename: 'static/js/[name].[hash:8].chunk.js',
    publicPath: "./"
  },

关于publicPath：

公共路径，它会在你所有的路径前加指定参数。看图：

这是 publicPath = ' ./ ' 下的文件路径

这是默认的，也就是 publicPath = ' ' 下的文件路径：

 

三、module

其他的处理除css外与开发篇相同，以下就仅仅把代码贴上：

     {
        test: /\.(htm|html)$/i,
        use: [{
          loader: 'html-withimg-loader'
        }]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        include: /\src/,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'static/img/[name].[hash:8].[ext]',
          }
        }]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/media/[name].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/fonts/[name].[ext]'
        }
      },

对于css的处理：

我们更多的情况下是会引入外部的css文件，这里处理的目的就是把多个css文件处理成一个文件并用外联的方法引入。

首先，提取css，webpack4+用 mini-css-extract-plugin 这个插件，其他使用