webpack-dev-server的安装与使用

安装

1. 局部安装：

npm install --save-dev webpack-dev-server@版本号

2. 全局安装： npm install -g webpack-dev-server@版本号

注意：在开始一个项目的各种插件、依赖安装之前，需要npm init一下，编辑项目的各种信息。

域名设置及访问

1. 找到webpack.config.js文件，在里面加上如下代码：

        'common':['./src/page/common/index.js','webpack-dev-server/client?http://localhost:8088/'],
    }
复制代码

2. 通过如下命令启动： webpack-dev-server --inline --port 8088
3. 打开localhost：8088/即可通过浏览器访问项目

注意：webpack-dev-serve安装以后，对代码作出任何修改，不用再在bash里使用webpack指令打包项目，bash就会自动编译。但还需要下面这一步，浏览器才会实时显示代码编辑的效果。

4. 在webpack.config.js里设置publicPath,也就是访问时的路径（path设置的是打包后存放的路径）

output:{
        path:'./dist',
        publicPath: '/dist',//加这个
        filename:'js/[name].js'
    },
复制代码

环境变量的配置

目的：区分线上线下环境 方法：

var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
console.log(WEBPACK_ENV);
……
if (WEBPACK_ENV === 'dev') {
    config.entry.common.push('webpack-dev-server/client?http://localhost:8088/')
};//只需要在本地环境在入口设置域名
复制代码

此时在bash终端输入WEBPACK_ENV=dev webpack-dev-server --inline --port 8088即可通过浏览器查看效果。

简化bash指令

上面的一长串bash指令实在太麻烦，记不住啊～～ 找到package.json文件，加上如下命令：

"scripts": {
    "dev"      : "WEBPACK_ENV=dev webpack-dev-server --inline --port 8088",
    "dev_win"  : "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088",
    "dist"     : "WEBPACK_ENV=online webpack -p",
    "dist_win" : "set WEBPACK_ENV=online && webpack -p",
    "build"    : "webpack --mode production"
  },
复制代码

以win结尾的是在Windows系统下的命令，注意上方简写在bash中使用时需要加上npm run前缀。

转载于:https://juejin.im/post/5c7b4b6e5188251a006ad829