webpack4.0高级
环境变量
webpack --env.NODE_ENV=local --env.production --progress
Tree Shaking
移除JS上下文字未被引用的代码
只支持ES6的import和export
optimization: {
usedExports: true
}
package.json
"sideEffects": ["*.css", "*.scss"],
development and production
webpack-merge
构建开发环境和生成环境
开发环境需要实时重新加载,热模块替换能力的source map和localhost server
生成环境需要更小的bundle, 更轻量级的source map
Code Splitting
首先介绍第一种代码分割
lodash
entry: {
main: resolve(__dirname, '../src/index.js'),
lodash: resolve(__dirname, '../src/lodash.js')
}
创建lodah.js
import _ from 'lodash' window._ = _
webpack的代码分割
optimization:{
splitChunks:{
chunks: 'all'
}
}
同步代码:只需要在webpack.common.js中配置optimization
异步代码:通过import,无需任何配置即可,会自动进行代码分割
async function getLodash() {
const { default: _ } = await import(/* webpackChunkName: 'lodash' */ 'lodash')
const ele = document.createElement('div')
ele.innerHTML = _.join(['Hi', 'Susan'], '*')
return ele
} getLodash().then( res => {
document.body.appendChild(res)
})
webpack --profile --json > stats.json
filename and chunkFileName
filename
对应entry里面生成的文件名字
chunFileName
chunkFileName未被列在entry中,如异步加载(import)
MiniCssExtractPlugin
mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../',
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
],
},
],
},
};
development中热更新
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production'; module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
}),
],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
'postcss-loader',
'sass-loader',
],
},
],
},
};
production中css压缩
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
缓存
格式
[<hashType>:contenthash:<digestType>:<length>]
Shimming
一直垫片形式,项目中使用lodash,我们可以不需要引入lodash,webpack自动完成
new webpack.ProvidePlugin({
_: 'lodash'
})
index.js代码,没引入lodash
const dom = document.createElement('div')
dom.innerHTML = _.join(['Hi', 'Susan'], ' ')
document.body.appendChild(dom)
imports-loader
模块中的this指向是一个{},可以是用imports-loader指定this->window
use: 'imports-loader?this=>window'
TypeScript
ts-loader / typescript
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader'
}
]
}
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist",
"module": "es6",
"target": "es5",
"allowJs": true
}
}
index.tsx
import * as _ from 'lodash' class Greeter {
greeting: string
constructor(message: string) {
this.greeting = message
}
greet() {
console.log(_.join([this.greeting, 'Go'], '_'))
}
} const greeter = new Greeter('Hi Susan') greeter.greet()
historyApiFallback
proxy
secure
resolve
alias
module.exports = {
//...
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/')
}
}
};
extensions
module.exports = {
//...
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json']
}
};
webpack4.0高级的更多相关文章
- webpack4.0介绍与使用(一)
1:webpack的基本使用: ##在网页中会引用那些静态资源: js, css, images, 字体文件和模板文件(.vue)等 ##网页总引用静态资源多了以后会有那些问题: 网页加载速度慢,因为 ...
- Yii2.0高级框架数据库增删改查的一些操作(转)
yii2.0框架是PHP开发的一个比较高效率的框架,集合了作者的大量心血,下面通过用户为例给大家详解yii2.0高级框架数据库增删改查的一些操作 --------------------------- ...
- Yii2.0高级框架数据库增删改查的一些操作
yii2.0框架是PHP开发的一个比较高效率的框架,集合了作者的大量心血,下面通过用户为例给大家详解yii2.0高级框架数据库增删改查的一些操作 --------------------------- ...
- C# 6 与 .NET Core 1.0 高级编程 - 37 章 ADO.NET
译文,个人原创,转载请注明出处,有不对的地方欢迎指出与交流. 英文原文:Professional C# 6 and .NET Core 1.0 - 37 ADO.NET --------------- ...
- C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(上)
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(上)),不对的地方欢迎指出与交流. 章节出自<Professional C# 6 ...
- C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(下)
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(下)),不对的地方欢迎指出与交流. 章节出自<Professional C# 6 ...
- C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务(上)
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务(上)),不对的地方欢迎指出与交流. 章节出自<Professional C ...
- C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务(下)
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务(下)),不对的地方欢迎指出与交流. 章节出自<Professional C ...
- C# 6 与 .NET Core 1.0 高级编程 - 40 ASP.NET Core(上)
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 40 章 ASP.NET Core(上)),不对的地方欢迎指出与交流. 章节出自<Professiona ...
随机推荐
- myeclipse中出现The method xxx of type must override or implement a supertype
出现问题提示:The method xxx of type must override or implement a supertype? annotation:@Override的原因 查阅了一下资 ...
- MySQL--分组数据
1.数据分组 #连接数据库 use newschema; #查看表中数据 select *from products: #返回供应商1003提供的产品数目 ; 2.创建分组 select vend_i ...
- BZOJ 3546 [ONTAK2010]Life of the Party (二分图最大匹配必须点)
题解:给出一个二分图,问你取点哪个点会使得二分图匹配数减少. 解法:其实就是问二分图匹配的必须点.先对初始二分图做一次最大匹配. 现在考虑左边点,看残余网络上的边重新构图:如果是匹配边那么就从右往左连 ...
- Linux 操作系统介绍
应用软件——操作系统——硬件 操作系统的作用 是现代计算机系统中最基本和最重要的系统软件 是配置在计算机硬件上的第一层软件,是对硬件系统的首次扩展 主要作用是管理好硬件设备,并为用户和应用程序提供一个 ...
- elasticsearch学习笔记001
<Elasticsearch 核心技术与实战>课程Github代码 https://github.com/onebirdrocks/geektime-ELK 运行的环境: windows ...
- js实现复制|剪切指定内容到粘贴板--clipboard
这是著名开源项目 clipboard.js 的 README.md,里面讲解的更加详细,有兴趣的同学可以了解一下.项目地址:https://github.com/zenorocha/clipboard ...
- java统计一个子串在指定字符串中出现的次数
今天查着用了用String类里的几个方法,分享下代码 题目要求:统计一个子串在指定字符串中出现的次数( 提示java字串出现了6次) public class SearchSameString { p ...
- 思维——cf1178E
一开始少看了条件:相邻两个字符不相等,字符集只有abc 那么我们取开头结尾各两个字符,一定有两个是相等的 #include<bits/stdc++.h> using namespace s ...
- [SDOI2015]排序 题解 (搜索)
Description 小A有一个1-2^N的排列A[1..2^N],他希望将A数组从小到大排序,小A可以执行的操作有N种,每种操作最多可以执行一次,对于所有的i(1<=i<=N),第i中 ...
- TLS/SSL 协议 - ServerKeyExchange、ServerHelloDone
ServerKeyExchange ServerKeyExchange消息的目的是携带密钥交换的额外数据.消息内容对于不同的协商算法套件都会存在差异.在某些场景中,服务器不需要发送任何内容,这意味着在 ...