webpack初学者笔记2

微信扫一扫,分享到朋友圈

webpack初学者笔记2

webpack中source map使用

当打包后产生的错误会无法定位到对应的文件位置,所以使用sourceMap来定位打包前的对应文件位置即将编译后的代码映射回原始源代码

module.exports = {
devtool: 'inline-source-map'
}

webpack中自动编译

1.webpack’s Watch Mode

依赖图中的所有文件以进行更改。如果其中一个文件被更新,代码将被重新编译,不必手动运行整个构建。

2.webpack-dev-server

提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)

npm install --save-dev webpack-dev-server

配置如下

module.exports = {
devServer: {
contentBase: './dist'
}
}

3.webpack-dev-middleware


webpack-dev-middleware
是一个容器(wrapper),它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server
在内部使用了它,同时,它也可以作为一个单独的包来使用,以便进行更多自定义设置来实现更多的需求

npm install --save-dev express webpack-dev-middleware

模块热更新

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新。

启动配置HMR(HotModuleReplacementPlugin)

plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],

tree shaking

移除打包中没有使用的代码

package.json

{
"sideEffects": false
}

环境分离打包


提供环境参数确认当前环境 通过与 process.env.NODE_ENV
环境变量关联 将webpack.config.js拆分为

webpack.common.js

webpack.dev.js

webpack.prod.js

统一文件加不同环境用不同的js文件打包

微信扫一扫,分享到朋友圈

webpack初学者笔记2

面试官:你说熟悉MySQL事务,那来谈谈事务的实现原理吧!

上一篇

西瓜视频的野望:不只是寻找下一个王刚

下一篇

你也可能喜欢

webpack初学者笔记2

长按储存图像,分享给朋友