一.搭建本地服务器
webpack提供了一个可选的本地开发服务器,该服务器基于node.js搭建,可以实现我们想让浏览器自动刷新显示我们修改的结果,它将我们修改的内容暂时放到内存中,直至最后npm run build才保存至磁盘。
- 首先,在webpack中使用之前需要先安装:
npm install --save-dev webpack-dev-server@2.9.1
- 接着在webpack.config.js文件中添加属性devServer
module.exports={
...
devServer:{
contentBase:'./dist',
online:true, // 是否实时监听
}
}
-
然后在package.josn文件中,添加
'dev':'webpack-dev-server'
-
接着在终端执行
npm run dev
即可,终端将返回一个本地连接,在这里我们就能实时监听修改的结果了
-
当本地测试结束时,在终端输入
npm run build
实现最终的打包
注意:如果希望输入npm run dev
后,服务器自动打开,则需要额外输入–open,即:
二.webpack配置文件的抽离
有些配置是开发时需要配置的(如devServer),而有些配置是打包时才使用到的,因此需要抽离出来
- 首先我们在目录下方新建一个build文件夹,用来存放所有的配置信息
- 其次建三个子js文件:base.congif.js , prod.config.js , dev.config.js
- 将基础公用的放在base中,开发中需要的放在dev中,生产需要的放在prod中
- 然后,需要在终端执行
npm install webpack-merge --save-dev
,以混合配置文件
- 此时build文件中的三个配置文件就可以替代webpack.config.js文件了,即可以删除webpack.config.js文件
- 然而,删除后,我们还需要在package.json中手动修改build和dev的路径,以避免报错
注意:此时执行npm run build
后,会将dist文件夹打包到build文件夹中,但是我们希望它创建在根目录下,因此需要在base.config.js中修改:
造成此现象的原因是:因在原base.config.js中,我们将路径设置为./dist,即当前文件下的dist文件夹,但是当抽离出配置文件之后,当前文件为build,因此会创建在build文件夹下,故需要修改路径为**…/dist**