webpack笔记1

Posted 2020-10-17 炎泽

1.设置多个入口起点

多用于提取公共类库

a、利用commonChunkPlugin

const webpack= require(‘webpack‘);
const path = require(‘path‘);
const htmlWebpackPlugin= require(‘html-webpack-plugin‘);
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);

module.exports = {
  entry: {
    main: ‘./src/main.js‘,
　　//工具类放在一个入口
　　//当内容为数组时，将创建多个主入口，生成一个chunk
    vendor: [‘jquery‘,‘angular‘]
  },
  output: {
    filename: ‘[name].[chunkhash].js‘,
    path: path.resolve(__dirname, ‘dist‘),
    publicPath: ‘./‘
  },
  module: {
      rules: [
      {
          test: /\.css$/,
          use: [‘style-loader‘, ‘css-loader‘]
      },{
        test: /\.(png|jpg|gif|svg)$/,
        loader: ‘file-loader‘,
        options: {
              name: ‘[name].[ext]?[hash]‘
        }
    },{
        test: /\.vue$/,
        loader: ‘vue-loader‘,   
        options: {
              loaders: {
            ‘scss‘: ‘vue-style-loader!css-loader!sass-loader‘,
            ‘sass‘: ‘vue-style-loader!css-loader!sass-loader?indentedSyntax‘,
              }
              // other vue-loader options go here
        }
      }
      ]
  },
  plugins: [
    new HtmlWebpackPlugin({
       title: ‘Output Management‘
    }),
    new CleanWebpackPlugin([‘dist‘]),
    new webpack.optimize.CommonsChunkPlugin({
　　　　　　name: ‘vendor‘,
　　　　　　filename: ‘librarys.js‘
      })
  ],
  devtool: ‘source‘
};

这样就能生成librarys.js，包含jquery与angular，但值得注意的是会连同公共类库一起打包

 

b.利用external提取公共类库（推荐方法）

const path = require(‘path‘);
const HtmlWebpackPlugin= require(‘html-webpack-plugin‘);
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘)
var ManifestPlugin = require(‘webpack-manifest-plugin‘);
const webpack= require(‘webpack‘);

module.exports = {
  entry: {
    main: ‘./src/main.js‘
  },
  output: {
      //非覆盖更新
    filename: ‘[name].[chunkhash].js‘,
    path: path.resolve(__dirname, ‘dist‘),
    publicPath: ‘./‘
  },
  externals: {
      jquery: ‘jquery‘
    },
  module: {
      rules: [
      {
          test: /\.css$/,
          use: [‘style-loader‘, ‘css-loader‘]
      },{
        test: /\.(png|jpg|gif|svg)$/,
        loader: ‘file-loader‘,
        options: {
              name: ‘[name].[ext]?[hash]‘
        }
    },{
        test: /\.vue$/,
        loader: ‘vue-loader‘,
        options: {
              loaders: {
            ‘scss‘: ‘vue-style-loader!css-loader!sass-loader‘,
            ‘sass‘: ‘vue-style-loader!css-loader!sass-loader?indentedSyntax‘,
              }
        }
      }
      ]
  },
  plugins: [
      new HtmlWebpackPlugin({
       title: ‘Output Management‘
    }),
    new CleanWebpackPlugin([‘dist‘])
  ],
  devtool: ‘source‘
};

注意这里使用的是使用全局变量的方式，所以得手动在index.html中引入jquery

 

2.commonChunkPlugin

 将公共依赖放入模块提取到已有的入口chunk中，或者提取到新生成的chunk（常见）

 

4.动态载入

chunkFilename 非入口chunk名称

return import(/*webpackCHunkName: "ladash"*/‘lodash‘).then() 懒加载