webpack-config.js配置

webpack 基本配置 （记录）

webpack-config.js开发环境配置

/*
  这个文件是针对开发环境做的配置文件
*/
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MinniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const CssUrlRelativePlugin = require('css-url-relative-plugin')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // profile 分析bundle大小的插件
module.exports = {
  entry: path.join(__dirname, '../src/index.js'), // 入口文件配置
  output: { // 出口文件配置
    path: path.join(__dirname, '../build'),
    filename: 'js/app.js' // 将来在build目录下  js/app.js
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配整个项目下的.css文件
        // use: [ 'style-loader','css-loader' ]//使用css-loader来处理css文件
        use: [
          MinniCssExtractPlugin.loader,//本质就是创建一个style标签再将输出的css地址引入
          'css-loader',
        ]
      },
      { // 配置优雅降级
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_models中的js文件
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }]
      },
      {//配置图片的打包
        test: /\.(png|jpg|gif)/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 5000,//字节少于5000 ——》 base64  超过5000  file
            outputPath: 'images/',
          }
        }]
      }
    ]
  },
  devServer: {
    hot: true,//热加载
    open: true,//自动启动服务器
  },
  plugins: [
    // 打包前先清除dist
    new CleanWebpackPlugin(),
    // webpack4抽取css文件
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
    new CssUrlRelativePlugin(),
    // 显示构建进度
    new ProgressBarPlugin(),
    // 处理路径大小写问题
    new CaseSensitivePathsPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, '../public/index.html'),
      filename: './index.html',//默认到output目录
      hash: true,//防止缓存,会给文件后面加入hash
      minify: {
        removeAttributeQuotes: true//压缩 去掉引号
      }
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../public'),
        to: path.resolve(__dirname, '../build')
      }
    ]),
    // typescript lint 检查
    new ForkTsCheckerWebpackPlugin({
      tsconfig: paths.appTsConfig,
      async: false,
      silent: true,
      eslint: true
    }),
    // 如果是成产环境 添加css压缩
    process.env.NODE_ENV === 'production' && new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessorOptions: {
        discardComments: {
          removeAll: true
        },
        autoprefixer: false,
        zindex: false
      },
      canPrint: true
    })
  ],
  /* 插件的配置 -- end */
  resolve: {
    modules: [path.join('node_modules')],//指定寻找目录
    mainFields: ['style', 'main'],//优先用style没有则使用main
    extensions: ['.js', '.css', '.json'], //如果导入的文件没有后缀名，那么先看js文件有无，再看css...
    alias: {
      components: './src/components/'//增加别名
    }
  },
  // 定义 sourcemap 配置
  devtool: process.env.NODE_ENV === 'production' ? false : 'cheap-module-source-map',
  // 如果是生产环境
  optimization: process.env.NODE_ENV === 'production' ? {
    minimize: true,
    minimizer: [new TerserPlugin({
      parallel: true,
      sourceMap,
      terserOptions: {
        compress: {
          comparisons: false
        },
        output: {
          ascii_only: true
        },
        mangle: {
          safari10: true
        }
      }
    })]
  } : {}
}

package.json配置

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js", 
  "scripts": {
    "dev": "webpack  --config config/webpack-config-dev.js",
    "prod": "webpack --config config/webpack-config-prod.js",
    "start": "npm run dev & webpack-dev-server -w --config config/webpack-config-dev.js ",
    "build": " npm run prod & webpack-dev-server  --config config/webpack-config-prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
}