环境变量

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)
})

  split-chunks-plugin

打包分析

  webpack --profile --json > stats.json

  webpack chart

  webpack-bundle-analyzer

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'],
},
],
},
};

缓存

  contenthash

  格式

    [<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
}
}

  types search

  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()

devServer

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

  1. webpack4.0介绍与使用(一)

    1:webpack的基本使用: ##在网页中会引用那些静态资源: js, css, images, 字体文件和模板文件(.vue)等 ##网页总引用静态资源多了以后会有那些问题: 网页加载速度慢,因为 ...

  2. Yii2.0高级框架数据库增删改查的一些操作(转)

    yii2.0框架是PHP开发的一个比较高效率的框架,集合了作者的大量心血,下面通过用户为例给大家详解yii2.0高级框架数据库增删改查的一些操作 --------------------------- ...

  3. Yii2.0高级框架数据库增删改查的一些操作

    yii2.0框架是PHP开发的一个比较高效率的框架,集合了作者的大量心血,下面通过用户为例给大家详解yii2.0高级框架数据库增删改查的一些操作 --------------------------- ...

  4. C# 6 与 .NET Core 1.0 高级编程 - 37 章 ADO.NET

    译文,个人原创,转载请注明出处,有不对的地方欢迎指出与交流. 英文原文:Professional C# 6 and .NET Core 1.0 - 37 ADO.NET --------------- ...

  5. C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(上)

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(上)),不对的地方欢迎指出与交流. 章节出自<Professional C# 6 ...

  6. C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(下)

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(下)),不对的地方欢迎指出与交流. 章节出自<Professional C# 6 ...

  7. C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务(上)

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务(上)),不对的地方欢迎指出与交流. 章节出自<Professional C ...

  8. C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务(下)

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务(下)),不对的地方欢迎指出与交流. 章节出自<Professional C ...

  9. C# 6 与 .NET Core 1.0 高级编程 - 40 ASP.NET Core(上)

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 40 章  ASP.NET Core(上)),不对的地方欢迎指出与交流. 章节出自<Professiona ...

随机推荐

  1. 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的原因 查阅了一下资 ...

  2. MySQL--分组数据

    1.数据分组 #连接数据库 use newschema; #查看表中数据 select *from products: #返回供应商1003提供的产品数目 ; 2.创建分组 select vend_i ...

  3. BZOJ 3546 [ONTAK2010]Life of the Party (二分图最大匹配必须点)

    题解:给出一个二分图,问你取点哪个点会使得二分图匹配数减少. 解法:其实就是问二分图匹配的必须点.先对初始二分图做一次最大匹配. 现在考虑左边点,看残余网络上的边重新构图:如果是匹配边那么就从右往左连 ...

  4. Linux 操作系统介绍

    应用软件——操作系统——硬件 操作系统的作用 是现代计算机系统中最基本和最重要的系统软件 是配置在计算机硬件上的第一层软件,是对硬件系统的首次扩展 主要作用是管理好硬件设备,并为用户和应用程序提供一个 ...

  5. elasticsearch学习笔记001

    <Elasticsearch 核心技术与实战>课程Github代码 https://github.com/onebirdrocks/geektime-ELK 运行的环境: windows ...

  6. js实现复制|剪切指定内容到粘贴板--clipboard

    这是著名开源项目 clipboard.js 的 README.md,里面讲解的更加详细,有兴趣的同学可以了解一下.项目地址:https://github.com/zenorocha/clipboard ...

  7. java统计一个子串在指定字符串中出现的次数

    今天查着用了用String类里的几个方法,分享下代码 题目要求:统计一个子串在指定字符串中出现的次数( 提示java字串出现了6次) public class SearchSameString { p ...

  8. 思维——cf1178E

    一开始少看了条件:相邻两个字符不相等,字符集只有abc 那么我们取开头结尾各两个字符,一定有两个是相等的 #include<bits/stdc++.h> using namespace s ...

  9. [SDOI2015]排序 题解 (搜索)

    Description 小A有一个1-2^N的排列A[1..2^N],他希望将A数组从小到大排序,小A可以执行的操作有N种,每种操作最多可以执行一次,对于所有的i(1<=i<=N),第i中 ...

  10. TLS/SSL 协议 - ServerKeyExchange、ServerHelloDone

    ServerKeyExchange ServerKeyExchange消息的目的是携带密钥交换的额外数据.消息内容对于不同的协商算法套件都会存在差异.在某些场景中,服务器不需要发送任何内容,这意味着在 ...