Webpack笔记

入口

entry（string | [string] | object { <key>: string | [string] } | (function: () => string | [string] | object { <key>: string | [string] })），每个模块的入口

entry: {
      element: ['element-ui'],
      vue: ['vue', 'axios', 'vue-router', 'vuex'],
      app: './src/main.js'
    },

输出

output位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。

output: {
      path: path.resolve(__dirname, outputPath),
      publicPath: host,
      filename: PATH_DIST.js + '[name].js' + (isProduction ? '?[chunkhash:8]' : '')
    },

path（string）

output 目录对应一个绝对路径。模块打包输出的文件路径

publicPath 对应模块在html的引用路径（加载外部资源）

 

filename 此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下

 
此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下

module

rules

创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。

{
      test: /.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
 },

resolve

这些选项能设置模块如何被解析，一般用于快速引入模块包

resolve: {
      alias: {'@': path.resolve(__dirname, '../src'),
        'lib': path.resolve(__dirname, '../static'),
        'scss': path.resolve(__dirname, '../src/scss/')
      },
      extensions: [".js"]
    }

 alias

创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块：

如上的alias，在组件内引用store
import storefrom '../../store';

可以写成 

import store from @/store';

extensions

自动解析确定的扩展，可以不写文件后缀。

plugins

选项用于以各种方式自定义 webpack 构建过程

webpack.optimize.CommonsChunkPlugin

new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3,
    }),

有助于提取这些依赖到共享的 bundle 中，来避免重复打包

CopyWebpackPlugin

new CopyWebpackPlugin([{
        from: path.resolve(__dirname, '../static'),
        to: '',
        ignore: ['.*']
      }]),

直接拷贝到dist文件，不通过编译

webpack.DefinePlugin

new webpack.DefinePlugin({
        'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
        'process.env.BASE_API': BASE_API_MAP[process.env.NODE_ENV],
        'process.env.UPLOADFILE': UPLOADFILE_MAP[process.env.NODE_ENV]
      }),

将一些配置插入环境中，在业务代码内可以使用 process.env 访问

webpack.optimize.UglifyJsPlugin

new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
          warnings: false
        }
      })

代码的压缩配置

HtmlWebpackPlugin

new HtmlWebpackPlugin({
        title: '消息推送平台',
        template: 'index.html',
        filename: '../index.html',
        inject: false,
        path: host,
        chunks: ['element', 'vue', 'app']
      }),

打生产包时候读取的配置

Server