环境变量

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. termios, tcgetattr, tcsetattr, tcsendbreak, tcdrain, tcflush, tcflow, cfmakeraw, cfgetospeed, cfgetispeed, cfsetispeed, cfsetospeed - 获取和设置终端属性,行控制,获取和设置波特率

    SYNOPSIS 总览 #include <termios.h> #include <unistd.h> int tcgetattr(int fd, struct termio ...

  2. appium1.7的使用

    1.安装成功后,双击图标启动appium 2.输入host:0.0.0.0 ,port:4723,点击start server,启动appium,如下图所示,启动成功 3.点击搜索图标,打开定位工具I ...

  3. python 对列表中任意两个数进行操作 (python operate any two elements in list)

    python中, 实现列表中的整型元素两两相乘或列表中的数组元素两两相与 1. 假设列表中的元素是整型, 可调用以下函数: def list_any_two_mul(mylist):      num ...

  4. C/C++ GBK和UTF8之间的转换

    { 关于GBK和UTF-8之间的转换,很多初学者会很迷茫. 一般来说GBK和UTF-8是文字的编码方式,其对应的内码是不一样的,所以GBK和UTF-8的转换需要对内码进行一一映射,然后进行转换. 对于 ...

  5. 如何修改magento分类页面的产品的显示个数

    经常的有客户问,怎么修改分类页面的产品的个数 这个是magneto后台操作的设置问题 打开后台,在英文状态下: system-->configuration 进入后,点击catalog Prod ...

  6. Magento 消息提示

    Magento 消息提示 //成功 Mage::getSingleton('customer/session')->addSuccess('恭喜您关联会员卡成功!'); //失败 Mage::g ...

  7. Vue学习笔记【23】——Vue组件(组件的定义)

    定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: ...

  8. spring data jpa 配置文件

    <?xml version="1.0" encoding="UTF-8"?><persistence xmlns="http://j ...

  9. 「NOI2016」循环之美(小性质+min_25筛)

    传送门. 题解 感觉这题最难的是第一个结论. x/y首先要互质,然后如果在10进制是纯循环小数,不难想到y不是2.5的倍数就好了. 因为十进制下除以2和5是除得尽的. 必然会多出来的什么东西. 如果是 ...

  10. 最全的PS快捷键大全!

    一.工具箱 01.(多种工具共用一个快捷键的可同时按[Shift]加此快捷键选取)02.矩形.椭圆选框工具 [M]03.裁剪工具[C]04.移动工具[V]05.套索.多边形套索.磁性套索[L]06.魔 ...