开发环境优化配置
1、优化打包构建速度
HMR
2、优化代码调试
source-map
const { resolve } =require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 可以将index.html文件配置在入口文件,使得html文件能够热更新,但一般不需要配置,html文件不需要热更新
// entry: ['./src/js/index.js','./src/index.html'],
entry: './src/js/index.js',
output:{
// js/build.js 表示输出到js目录下的build.js文件中
filename: 'js/built.js',
path: resolve(__dirname,'build/js')
},
module:{
rules:[
{
test:/\.css$/,
// 使用多个loader时,使用use
use:[
// 创建style标签,将js中的样式资源插入到head标签中生效
'style-loader',
// 将css变成commonjs中的加载到js中,里面的内容是样式字符串
// css文件在开发环境中被整合到build.js中,然后通过js文件创建style标签插入到页面中
'css-loader'
]
},
{
test:/\.less$/,
use: [
'style-loader',
'css-loader',
// 将less文件编译成css文件,需要下载less-loader、less
'less-loader'
]
},
{
//
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options:{
// 图片大小小于8kb,就会被base64处理
// 优点,减少请求数量(减轻服务器压力);缺点,图片体积会变大,图片请求速度边忙
limit: 8 * 1024,
// 问题:因为url-loader默认使用的es6模块化解析,而html-loader引入图片是commonjs
// 解析时会出现问题:[object object]
// 解决:关闭url-loader的es6模块化,使用commonjs解析
esModule: false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext] 取文件原来的扩展名
name: '[hash:10].[ext]',
// 输出文件的目录 build/imgs
outputPath: 'imgs'
}
},
{
test: /\.html$/,
// 负责处理html中的img图片(负责引入img,从而能被url-loader处理)
loader: 'html-loader'
},
{
// 打包其他资源,使用file-loader
exclude: /\.(css|js|html|less|jpg|png|gif)$/,
loader: 'file-loader',
options:{
name: '[hash: 10].[ext]',
// 其它资源输出到build/media目录下
outputPath: 'media'
}
},
]
},
plugins:[
// html-webpack-plugin 默认会创建一个空的html,自动引打包入输出的(js/css)文件
new HtmlWebpackPlugin({
// 通过配置template ,复制'./src/index.html'文件,并自动引入打包输出所有的资源(js/css)
template: './src/index.html'
})
]
mode: 'development',
// 开发服务器devServer,用来自动化(自动化编译、自动打开浏览器、自动刷新浏览器)
// 特点:只会在内存中打包,不会有任何输出
// 启动devServer命令,npx webpack-dev-server (下载:npm i webpack-dev-server -D)
devServer:{
// 项目构建后路径
contentBase: resolve(__dirname,'build'),
// 启动gzip 压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open:true,
1、HRR:(hot module replacement) 热模块替换/模块热替换
作用:一个模块发生变化,只会重新打包一个模块(而不是打包所有模块)极大提升构建速度
样式文件:可以使用HMR功能,因为style-loader内部实现了HMR功能
js文件:默认没有HMR功能,需要修改入口js文件
html:默认没有使用HMR功能,如果开起了,会导致问题:html文件不能热更新(解决方法:修改entry文件,将html文件引入),
(html文件不需要热更新)
如果需要js热更新,需要在js代码中配置,如下所示:
if(module.hot){
module.hot.accept('./print.js',function(){
print()
})
}
上述代码监听print.js代码变化,一旦发生变化,其他模块不会重新打包
hot: true
},
2、source -map:一种提供源代码到构建后代码的映射技术,如果构建后代码出错,通过映射可以追踪到源码错误。
[inline-|hidden-|eval][nosources-][cheap-[module-]]source-map
source-map
inline-source-map:内联
1、只生成一个内联文件
hidden-source-map:外部
devtool: 'eval-source-map'
}