一. webpack的开发配置

一. 简介

下面是webpack5.0的开发的常见配置

二. 安装

npm init -y
// 基础webpack
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D

// 简单执行打包
npx webpack
npm install sass-loader sass style-loader  css-loader  -D

// 假如要使用postcss
npm i  postcss-loader postcss -D
// 使用autoprefixer
npm install  autoprefixer -D

// 使用es6等先进语法
npm install -D babel-loader @babel/core @babel/preset-env

三. 开发环境配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 入口
  entry: {
    index: './src/index.js',
  },
  // 出口
  output: {
    filename: 'script/[name].bundle.js', 
    path: path.resolve(__dirname, '../dist'), // 輸出目录
    clean: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html', // 引用的模板
      filename: 'index.html',
      inject: 'body' // 资源引入的位置
    }),
  ],
  mode:  'development', // 开发模式
  devtool: 'cheap-module-source-map', // source-map
  devServer: { 
    static: './dist',// 实际上执行运行npx webpack serve, 开发环境运行的内容依靠内存的，可不要
  },

  module: {
    rules: [
      { // 所有 .png 文件都将被发送到输出目录，并且其路径将被注入到 bundle 中
        test: /\.(png|svg)/,
        type: 'asset/resource',
        generator: {
          filename: 'static/[hash][ext]' // 表示dist目录下生成资源目录
        }
      },
      // {
      //   test: /\.svg/,
      //   type: 'asset/source' // 导出资源的源代码
      // },
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader', // 创建 <style></style> 标签，将 JS 字符串写入，添加到 DOM 中
          'css-loader',  // 加载css
          {// 使用 PostCSS 处理 CSS 使用 PostCSS 处理 CSS, 比如使用先进的css，但内部转化成现代浏览器理解的css,或者加上厂商前缀
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'autoprefixer', // 这里需要去package.json文件增加 "browserslist": ["> 1%" , "last 2 versions"]
                    {
                      // 选项
                    },
                  ],
                ],
              },
            },
          },
          'sass-loader' // 将 Sass 编译成 CSS
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'static/iconfont/[hash][ext]' // 表示dist目录下生成资源目录
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules目录
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      
      }

    ]
  },
  optimization: {
    splitChunks: { // 将第三方的包打入一个文件中，避免多次引入同一个第三方库
       cacheGroups: {
         vendor: {
           test: /[\\/]node_modules[\\/]/,
           name: 'vendors',
           chunks: 'all',
         },
       },
     },
  },

}