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的更多相关文章

  1. webpack笔记三 管理输出

    webpack笔记三 管理输出 增加src/print.js: export default function printMe() { console.log('I get called from p ...

  2. webpack笔记二 管理资源

    webpack笔记二 管理资源 webpack最出色的功能之一就是除了引入JavaScript,还可以通过loader引入任何其它类型的文件. 加载CSS 为了在JavaScript模块中import ...

  3. webpack笔记一 起步

    webpack笔记一 起步 安装 对于大多数项目,我们建议本地安装(--save-dev).这可以在引入突破式变更(breaking change)版本时,更容易分别升级项目. 起步 初始化项目 mk ...

  4. Webpack笔记(二)——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  5. Webpack笔记(一)——从这里入门Webpack

    准备了挺久,一直想要好好深入了解一下Webpack,之前一直嫌弃Webpack麻烦,偏向于Parcel这种零配置的模块打包工具一些,但是实际上还是Webpack比较靠谱,并且Webpack功能更加强大 ...

  6. 入门学习webpack笔记

    注意事项: 1.预热知识:前端模块化.commonJS最好提前了解.commonJS语法最好熟悉. 2.commonJS中,module表示当前模块,module.exports(或者exports) ...

  7. webpack笔记_(3)_First_Project

    知道了怎么样安装,那么学习一下简单的应用吧. 1.安装webpack npm install webpack -g (全局) npm install webpack --save--dev (本地) ...

  8. webpack笔记_(2)_Refusing to install webpack as a dependency of itself

    安装webpack时,出现以下问题: Refusing to install webpack as a dependency of itself npm ERR! Windows_NT npm ERR ...

  9. webpack笔记_(1)_webpack 安装

    webpack不仅可以解析jsx,也可以将es6转换为es5语法.最终,它把这些代码都打包成一个叫bundle.js的文件,我们在html文件中只引入这么一个js文件就可以了! 打包后,引用的语法im ...

  10. webpack 笔记

    webpack.config.json entry:入口,可有多个 devtool:'inline-source-map'      source map,遇到错误时,追踪到原文件,而不是编译后的文件 ...

随机推荐

  1. ylb:SQL 系统函数

    ylbtech-SQL Server: SQL Server-SQL 系统函数 SQL 系统函数 1,ylb:SQL 系统函数 返回顶部 -- ============================ ...

  2. 修改Linux基本配置

    1.修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=server1.cn 2.修改ip地址 vi /etc/sysconfig/netw ...

  3. 2016.11.14 MIT challenge之课程总览

    Degree Chartshttp://catalog.mit.edu/degree-charts/computer-science-engineering-course-6-3/ MIT Chall ...

  4. 转:maven2创建一个eclipse工程,设置M2_REPO

    from: http://tonychanhoho.iteye.com/blog/1584324 M2_REPO是一个用来定义 maven 2仓库在硬盘中的存储位置,windows默认是C:\User ...

  5. 转: 为什么做java的web开发我们会使用struts2,springMVC和spring这样的框架?

    from: https://github.com/RubyLouvre/agate/issues/8 今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以 ...

  6. linux中expr用法

    名称:expr  ### 字串长度  shell>> expr length "this is a test"  14  ### 数字商数  shell>> ...

  7. gray-code——找规律

    The gray code is a binary numeral system where two successive values differ in only one bit. Given a ...

  8. Neural Turing Machines-NTM系列(一)简述

    Neural Turing Machines-NTM系列(一)简述 NTM是一种使用Neural Network为基础来实现传统图灵机的理论计算模型.利用该模型.能够通过训练的方式让系统"学 ...

  9. 高速掌握Lua 5.3 —— Lua与C之间的交互概览

    Q:什么是Lua的虚拟栈? A:C与Lua之间通信关键内容在于一个虚拟的栈.差点儿全部的调用都是对栈上的值进行操作,全部C与Lua之间的数据交换也都通过这个栈来完毕.另外,你也能够使用栈来保存暂时变量 ...

  10. VueJS实现双向数据绑定:v-model

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...