webpack5 - 之开发环境的服务器设置、sourcemap 配置、环境拆分（清理上传打包缓存）

小小亮01

已于 2022-09-01 14:02:06 修改

阅读量734

点赞数 1

分类专栏： webpack5-vue 文章标签：服务器 webpack 前端

于 2022-09-01 11:05:13 首次发布

本文链接：https://blog.csdn.net/weixin_43845137/article/details/126639206

版权

webpack5-vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1：webpack5 - 之开发环境的服务器设置

package.json

  "scripts": {
    "dev": "webpack-dev-server --mode development",
  },
  "devDependencies": {
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.10.1"
  },

webpack.config.js

    devServer: {
      port: '3001', // 默认是 8080
      hot: true,
      compress: true, // 是否启用 gzip 压缩
      proxy: {
        '/api': {
          target: 'http://0.0.0.0:80',
          pathRewrite: {
            '/api': '',
          },
        },
      },
    },

npm run dev效果

在这里插入图片描述

2：webpack5 - 之开发环境的 sourcemap 配置

webpack.config.js

module.exports = (env) => {
  return {
    entry: {
      main: './src/main.js'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bunder.js',
    },
    devtool: 'eval-cheap-module-source-map',//开发环境配置 定位错误根源
 }
}

效果

在main.js 之中 log输出未定义的 b变量

3：webpack5 - 之环境拆分

package.json


  "scripts": {
    "dev": "webpack-dev-server --mode development --config build/webpack.dev.js --open",
    "build": "webpack --mode production --config build/webpack.pro.js",
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.10.1",
    "webpack-merge": "^4.2.1"
  },

基础配置

const path = require('path')
const MiniCssExtract = require('mini-css-extract-plugin') // css提取
const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动引入文件 插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 清理上次打包缓存

module.exports = {
  entry: {
    main: './src/main.js'
  },
  output: {
    publicPath: '',
    path: path.resolve(__dirname, '../dist'),
    filename: 'js/[name]_[contenthash:6].js',
  },
  // loader相关配置
  module: {
    rules: [{
        test: /\.(scss|css)$/, // 针对 .scss 或者 .css 后缀的文件设置 loader
        use: [
          // env.development ? 'style-loader' : 
          {
            loader: MiniCssExtract.loader
          },
          'css-loader',
          'postcss-loader',
          'sass-loader' // 使用 sass-loader 将 scss 转为 css
        ]
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true
          },
        },
        exclude: /node_modules/
      },

    ]
  },
  resolve: {
    extensions: ["*", ".js", ".vue"],
    // 设置别名
    alias: {
      "@": path.resolve(__dirname, "../src"), // 这样配置后 @ 可以指向 src 目录
    },
  },
  plugins: [
    // 分割css
    new MiniCssExtract({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    // 自动生成html ( 于打包后 dist目录下的 双击在浏览器显示 )
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: '自动生成 HTML',
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.html', // 根据此模版生成 HTML 文件
      // chunks: ['main'] // entry中的 app 入口才会被打包
    }),
    // 清理上次打包缓存
    new CleanWebpackPlugin(),
  ]
}

dev环境

const merge = require('webpack-merge')
const baseConfig = require('./webpack.base');
const devConfig = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map', //开发环境配置 定位错误根源
  devServer: {
    port: '3001', // 默认是 8080
    hot: true,
    compress: true, // 是否启用 gzip 压缩
    proxy: {
      '/api': {
        target: 'http://0.0.0.0:80',
        pathRewrite: {
          '/api': '',
        },
      },
    },
  }
}
module.exports = merge(baseConfig, devConfig)

pro环境

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') //生产环境 进行压缩css
const TerserPlugin = require('terser-webpack-plugin'); // js压缩

const proConfig = {
  mode: 'production',
  devtool: 'hidden-source-map',
  optimization: {
    minimizer: [
      // 压缩css - 生成环境
      new CssMinimizerPlugin(),
      new TerserPlugin({
        // 多进程
        parallel: true,
        //删除注释
        extractComments: false,
        terserOptions: {
          compress: { // 生产环境去除console
            drop_console: true,
            drop_debugger: true,
          },
        },
      }),
    ]
  },
}

module.exports = merge(baseConfig, proConfig)

mian.js

import "@/css/main.css"
import "@/css/main.scss"
console.log("main.js-11");
let a = 100;
console.log("a",a);
const set = new Set([1, 2, 3, 1])
console.log('res,', set, '; set-arr', [...set])
// console.log("aa",b);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./dist/css/style.css"> -->
</head>
<body>
  <!-- <script src="./dist/bunder.js"></script> -->
  <p>
    我是p
    <div class="ppp">我是ppp-1--1112</div>
  </p>
</body>
</html>