1: webpack的配置
{entry:{app:'./src/app.js',search:'./src/search.js'},
output:{filename:'[name].js',path:__dirname+'/dist'},
mode:'development',
devtool: 'inline-source-map',}
1:入口配置
entry:可以为对象,也可以为数组。一个入口生成一个chunk或者多个入口生成多个chunk时用对象,如果多个入口生成一个chunk时用数组。
注意:无论webpack的配置文件在那个目录下放着,入口文件的路径是以node包所在的目录为根路径
2:输出配置
output:可以为输出单页面,也可以是多页面。
publicPath:在所有的静态资源面前加上公共的目录。上线时所用
3:模式
mode:告知webpack使用内置的模式。模式有两种,development和production,默认是production。设置这两种模式后,会默认将node环境跟着一起设置
4:webpack启动指令
webpack --mode development --config build/webpack.config.js
如果是自己定义的webpack配置文件,那么在命令中需要添加--config指定位置
5:source map
devtool:这个字段用于将编译后的代码映射回原始源代码。
一般开发模式不用配置,默认的配置就可以看到报错或者警告。线上代码需要配置为none
devtool:none
6:热更新
对于webpack的热更新有三种选择
webpack's Watch Mode: webpack内置的热更新方式,只需要在启动时,在命令行上加上--watch即可。缺点:需要手动刷新浏览器
webpack-dev-server:这种热更新方式是webpack会自动搭建一个web服务器,可以自动打开浏览器,当代码改变时,浏览器也会自动刷新
webpack-dev-middleware:相当于一个容器。自己搭建一个node服务器,然后将代码放进这个容器中,接着注册进node服务器中就可以实现热更新。
7:热替换
热替换与热更新的区别是,热更新需要重新加载页面才可以看到效果,而热替换不需要。比如开发的过程中,改变了一个dom的颜色,热替换会保留原来的状态,直接将原来的颜色给替换
热替换也有三种方式
1:通过命令行方式直接进行替换
2:启动webpack-dev-server自带的热替换
使用方法:
只需要在devServer中配置以下代码:
3:使用webpack-hot-middleware中间件。这种方式适用于原来有一个node服务。
使用方法:
1:在入口处如下添加配置
2:插件中添加
3:将中间件注册进服务中
4:在入口处添加(不添加js模块无法热替换)
8:删除未引用的代码 tree shaking
tree shaking用于移除JavaScript脚本中未引用的代码。未引用的代码意思就是比如有一个工具类,里面有多个方法,而你只用来其中的一个,那么其他的代码被称为未引用的代码
使用方法:
1:package.json中配置如下代码:
" sideEffects":false // 这段代码的意思是找到脚本中无用的代码
2:使用压缩插件(UglifyJsPlugin,在webpack4中,只需要将mode配置为production即可。
注意:必须使用es6语法
2:常用的load
1:处理css的load
css-loader
主要负责将css代码转换成js
style-loader
主要负责将css代码从js文件中抽离出来插入到html页面的style标签中
这两个load一般是一起使用
2:处理文件资源,包括图片、字体。。
file-loader:将资源从资源目录拷贝到dist目录下。具体名字、目录可以配置
url-loader:这个loader也是对资源进行处理,和上面的区别就是url-loader可以对图片进行编码,生成dataURl。相当于把图片数据翻译成一串字符,编译进代码中。url-loader的参数可以配置一个界限,如果图片小于这个界限,那么便会编码成dataUrl,否则就和file-loader一样,将图片拷贝到编译生成的目录下。
image-webpack-loader:图片压缩loader,这个loader在配置中,必须放在file-loader或者url-loader之后。
注意:放在前面是无效的
使用方法:
{test:/\.(png|jpg|gif)$/,
use: [
{loader:'url-loader',
options: {limit:8192}
},
'image-webpack-loader']}
处理的顺序是:先压缩,后进行拷贝或者编码
3:常用的插件
1:html-webpack-plugin
这个插件可以动态生成html文件,同时将我们编译出来的js文件加到html页面中。也可以根据模板生成。
具体使用方法:
https://segmentfault.com/a/1190000011182242
2:clean-webpack-plugin
这个插件可以清空指定的目录,具体使用方法如下:
new CleanWebpackPlugin(['dist'], {
root: process.cwd()
})
root这个参数配置的是根目录。上面这段代码的意思是清空dist目录下的文件
3:optimization.splitChunks
CommonsChunkPlugin已弃用
公共代码抽离插件,可以将公用的文件打包成一个或多个文件
optimization: {
splitChunks: {
chunks:"all",
minSize:0,
name:'common',
minChunks:1
}
},