webpack从0到1的配置（五）

webpack从0到1的配置（一）

webpack从0到1的配置（二）

webpack从0到1的配置（三）

webpack从0到1的配置（四）

到此为止我们只有一个npm run build命令，但是我们写vue项目一般会有两个命令，一个npm run dev，启动开发环境，

一个npm run build 打包生产环境的代码。

• npm run dev 相当于把自己的电脑当中服务器，开启来一个服务供程序员开发调试
• 怎么在本地开启一个服务呢？需要下载webpack-dev-server 插件
• npm install webpack-dev-server --save-dev
• 在webpack.config.js文件里，添加devServer配置，contentBase指定本地服务器访问dist文件夹

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  entry: {
    main: './src/main.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
+ devServer: {
+   contentBase: path.resolve(__dirname, 'dist'),
+   host: 'localhost',
+   port: '8080'
+  },
以下代码省略跟之前一样....

• 修改package.json文件的scripts选项

 "scripts": {
    "dev": "webpack-dev-server --open webpack --config ./webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

• 执行 npm run dev
• 在浏览器访问localhost:8080
• 接下来我们会配置开发环境和生产环境不同的配置文件

点击  webpack从0到1的配置（六）