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() 懒加载
webpack笔记1
原文地址：http://www.cnblogs.com/yanze/p/7999956.html