配置开发环境

webpack-dev-server

❝

这里使用了*yarn*包管理工具安装，webpack-dev-server是在本地起一个 localhost 服务

❞

yarn add webpack-dev-server -D

const path = require('path')
module.exports = {
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    host: '0.0.0.0',
    open: true,
    watchContentBase: true，
    proxy: {
      '/api': 'http://localhost:9000'
    }
  },
  entry: './src/index.js',
  output: {
    filename: 'build.js',
    path: path.resolve(__dirname, 'dist')
  }
}

• 「contentBase」：指定文件目录
• 「compress」：启用 gzip 压缩
• 「port」：端口号，默认 8080
• 「host」：指定 ip 地址，默认是 localhost，如果外部可以访问设置成0.0.0.0
• 「open」：启动服务的时候自动在浏览器中打开
• 「watchContentBase」：文件更改重新加载
• 「proxy」：开发环境下服务器代理
  • 上例中，代理了http://localhost:9000，当打开http://localhost:3000/api/就等于访问http://localhost:9000，
  • 解决了开发环境下接口跨域的问题

配置启动脚本命令和打包脚本命令

• 在package.json增加scripts
• 增加"dev": "webpack-dev-server"
  • 启动服务的时候只需要在命令行中输入npm run dev
• 增加"dev": "webpack-dev-server"
  • 打包的时候输入npm run build

{
  "name": "webpack-study",
  "devDependencies": {
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  },
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  }
}

• 在控制台输入npm run dev命令会自动在浏览器中打开服务
• 在控制台输入npm run build命令会进行文件打包

欢迎关注公众号