webpack从0到1的配置(五)

2019/7/23 17:56:42 人评论 次浏览 分类:学习教程

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的配置(五)

 

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->