webpack 使用 二

生产环境配置

会将 DefinePlugin 中 process.env.NODE_ENV 的值设置 为 production。

能让代码优化上线运行的环境

将某些文件提取为单独文件

提取CSS为单独文件

打包出来的bundle.js还包含了css文件，明显不有利于我们做浏览器缓存，需要抽离css文件，打包成单独的文件

// 单独分离css
const ExtractPlugin = require('extract-text-webpack-plugin')
 
 
config.module.rules.push({
    // test: /\.styl$/,  // 这样配置会有个错误Module parse failed: Unexpected character '#'，使用下面配置处理
    test: /.styl(us)?$/,
    use: ExtractPlugin.extract({
      fallback: 'style-loader', // 把css-loader的代码包一层js代码,这个一层js代码是写入到我们html当中的
      use: [
        'css-loader',
        {
          loader: 'postcss-loader', // 添加postcss.config.js , webkit前缀
          options: {
            souerMap: true, // 可直接使用前面的souerMap，提高编译效率
          }
        },
        'stylus-loader'  //stylus-loader解析后是css   webpack的loader 就是一层一层的往上传递
      ]
    })
  })
  config.plugins.push(
    new ExtractPlugin('styles.[contentHash:8].css'), // 指定输入的文件名，根据css内容输出的name值
  )

抽离类库 vue源码打包，及webpack配置单独抽离

为什么要把第三方类库和业务逻辑代码分离打包？

如果把业务逻辑代码和第三类库打包到一起，整个类库代码就需要随着业务代码的更新而更新，这样类库代码就不能在浏览器里进行缓存。为了尽可能的使用浏览器缓存来减少服务器流量，以及用户加载速度更快，所以单独拆分出来进行打包

为什么要把webpack配置单独抽离？

webpack配置单独打包在一个文件中，在有新的模块加入时，webpack会给每个模块加个id上去，会导致hash发生变化，这样我们的浏览器缓存就失效了，webpack配置单独打包成一个文件 好处是预防这种问题发生，保证浏览器长缓存

config.entry = {
    entry: path.join(__dirname, 'src/index.js'),
    // vendor: ['vue', 'vue-router', 'vuex'] // 定义需打包类库的name
    vendor: ['vue']
  }
 
 
config.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
      'name': 'vendor' // vendor必须与上面定义的字段相同，注意点vendor一定要放在runtime前面
    }),
    new webpack.optimize.CommonsChunkPlugin({
      'name': 'runtime' //注意顺序一定要写在后面 把在dist/entry.js 里面的webpack配置单独打包在一个文件中，在有新的模块加入时，webpack会给每个模块加个id上去，会导致hash发生变化，这样我们的浏览器缓存就失效了，webpack配置单独打包成一个文件 好处是预防这种问题发生，保证浏览器长缓存
    }),
  )

其他开发环境配置

css兼容性处理

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          /*
            css兼容性处理：postcss --> postcss-loader postcss-preset-env

            帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式

            "browserslist": {
              // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
              "development": [
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
              ],
              // 生产环境：默认是看生产环境
              "production": [
                ">0.2%",
                "not dead",
                "not op_mini all"
              ]
            }
          */
          // 使用loader的默认配置
          // 'postcss-loader',
          // 修改loader的配置
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
};

压缩CSS

JS语法检查

JS兼容性处理

JS压缩

HTML压缩