Webpack5随笔

webpack5

asset module type 资源模块类型 可以代替file-loader 、url-loader

webpack常用的loader

less-loader

css-loader

style-loader

postcss-loader

file-loader 可打包iconfont

url-loader 可转base64

常用plugin

clean-webpack-plugin 删除文件夹

html-webpack-plugin 生产html文件

copy-webpack-plugin 复制public文件夹

配置babel

bable-core

babel-loader presets

.babel.config.json配置文件

babel 执行阶段：解析parseing 转换transformation 代码生成Code Generation 目标源代码

环境

mode:‘development’和’production’

分离

建config文件夹

指定文件

“scripts”:{
	build:'webpack --config ./config/webpack.prod.config.js',
    serve:'webpack serve --config ./config/webpack.dev.config.js'
}

最后一个公共的config用webpack-merge

设置sourcemap

devtool:'source-map'

出口入口

entry

entry:'./src/main.js'

output

const path = require('path')
output:{
    path:path.resolve(__dirname,"./build"),
    filename:'js/bundle.js'
}

打包单文件

vue-loader@next

@vue/compiler-sfc

const { VueLoaderPlugin } = require('vue-loader/dist/index')

两个标识

设置options api ：

new DefinPlugin(
	{
        __VUE_OPTIONS_API__:true,
        __VUE_PROD_DEVTOOLS__:false
    }
)

webpack-dev-server

将bundle文件保存到了内存里

事实上使用了一个库memfs（memory-fs webpack自己写的）

HMR热模加载

target:'web',
dvServer:{
	contentBase:'./public',
	hot:true，
    host:'0.0.0.0',//可以让别的电脑看到自己电脑
    port:'7777',
    open:true,
    compress:true,//gzip格式压缩 -- Content-Encoding:gzip
    proxy:{
        secure:false,
        changeOrigin:true
    }
}

if(module.hot){
	module.hot.accept('./js/element.js',()=>{
		console.log('element模板热更新了')
	})
}

解决方案：

vue-loader

react-refresh (react-hot-loader已经被弃用了)

原理：

WDS创建两个服务：提供静态资源的服务express和socket服务

historyApiFallback

resolve

基于enhence-resolve来解析文件路径

resolve:{
	modules:['node_modules']，
    extensions:['.js','.json'],
    alias:{
        '@':path.resolve(__dirname,"./src")
    }
}

Vite

基于ESBuild、更快
ESBuild由go编写、直接转为机器码

预打包等