简单配置webpack过程（二）

1.使用webpack

每次使用webpack入口文件或者HTML文件都需要重新打包比较麻烦，可以使用webpack-dev-server用在开发的时候，处理我们代码每次修改都得重复打包的一个问题,如果我们的代码发生了变化它会自动的帮我进行一个打包处理,并且还会自动的刷新浏览器。

(1)使用步骤

 使用  `npm install webpack -dev -server -D`或者`yarn add webpack -dev -server -D`

安装后.png

(2)使用步骤

运行命令需要进行是在script脚本中配置命令

 "dev": "webpack-dev-server",

配置脚本.png

(3)使用步骤

再次运行 npm run dev,同时server帮我们启动了一个端口号为：8080的一个本地服务器但是启动了服务器原有的build.js文件路径不会被识别我们需要改到项目的根目录上引用./build.js文件

运行脚本.png

改了引用路径会造成当我们项目上线时，上线版本跟开发版本路径不对径容易出现问题，那如何解决？
这个问题也是可以在webpack.config.js文件中进行配置的Index.html页面中引入的出口文件就可以不用修改路径

devServer: {
                  port: 9090, //配置端口号  
                  publicPath: '/dist/', // 告诉webpack 我们打包的文件是放在那个位置的。
                 }

配置端口号.png

现在webpack能自动打打包并且运行了