99-配置服务器打包

配置服务器

• 安装插件

  npm i webpack-dev-server --save-dev
  

• 配置服务器

  //后端模块化代码
  module.exports = {
      //配置服务器
      devServer:{
          //1.设置服务器端口号 默认端口号为8080
          port:8888,
          //2.开启热部署，
          hot:true,
          //3.默认开启页面
          open:"/html/index.html"
      }
  };
  

• 运行代码

  npx webpack serve
  

• 配置环境变量

  npm i cross-env -D
  

• 获取设置好的环境变量

  const {NODE_ENV} = process.env;
  

• 在package.json中配置代码

  "scripts": {
      "test": "echo "Error: no test specified" && exit 1",
      "serve": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
      "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  },
  

• 设置webpack.config.js

  module.exports = {
      //打包模式
      mode:NODE_ENV,
      //出口文件 指定结构目录
      output: {
          ....
          // 清除之前的dist文件夹
          clean: NODE_ENV=="production"?true:false,
          publicPath:NODE_ENV=="production"?"../":"auto"
      },
      //配置服务器
      devServer:{
          //1.设置服务器端口号 默认端口号为8080
          port:8888,
          //2.开启热部署，
          hot:true,
          //3.默认开启页面
          open:"/html/index.html"
      },
      //关闭性能提示信息
      performance:{
          hints:false
      }
  };
  

• 执行语句

  npm run serve    #在开发环境进行运行
  npm run build    #在生产环境进行运行