【demo】webpack基本使用（快速原型开发）

[sleepyShen1989]

一些webpack的基本配置，方便快速开发demo

TL,DR

1. 安装node，初始化npmnpm init -y
2. 复制文章底部package.json部分，并安装依赖
3. 复制文章底部postcss.config.js部分
4. 新建src同级目录public，可以放入网页icon，页面模版
5. 复制文章底部webpack.config.dev.js部分
6. npm run build

---

1. 安装node（运行 webpack 5 的 Node.js 最低版本是 10.13.0 (LTS)）
2. npm init -y
3. npm install webpack webpack-cli --save-dev
   • 执行webpack命令会执行node_modules下的.bin目录下的webpack
4. 配置package.json的script
5. 样式支持
   1. npm install css-loader style-loader less-loader postcss-loader postcss-preset-env --save-dev
   2. 编写postcss配置：postcss.config.js
6. 资源模块支持
   1. webpack4: raw-loader/url-loader/file-loader
   2. webpack5: asset module type
      1. asset/resource 发送一个单独的文件并导出URL
      2. asset/inline 导出一个资源的data URI
      3. asset/source 导出资源源代码
      4. asset在导出一个data URI和发送一个单独的文件之间自动选择
   3. 图片支持 asset
   4. 字体模块支持 asset/resource
7. 生成html
   1. npm install html-webpack-plugin --save-dev
8. 打包前清空dist目录
   1. output选项配置clean: true
9. 新建src同级目录public，放入网页icon，页面模版
   2. HTMLWebpackPlugin配置模版路径
   3. webpack内置插件DefinePlugin，可在html模版中使用配置的变量<link rel="icon" href="<%= BASE_URL %>favicon.ico">
   4. 通过插件复制public目录中资源到dist目录 npm install copy-webpack-plugin --save-dev
10. 配置devtool
    1. source-map: 生产环境+高质量SourceMaps
    2. eval-source-map: 开发环境+高质量SourceMaps
    3. none：生产环境最佳性能
    4. deal: 开发环境最佳性能
11. 编写webpack.config.js

---

// package.json
"scripts": {
   "build": "webpack --config webpack.config.dev.js",
},
"private": true,
"devDependencies": {
   "clean-webpack-plugin": "^4.0.0",
   "copy-webpack-plugin": "^11.0.0",
   "css-loader": "^6.7.1",
   "html-webpack-plugin": "^5.5.0",
   "less-loader": "^11.1.0",
   "postcss-loader": "^7.0.1",
   "postcss-preset-env": "^7.8.2",
   "style-loader": "^3.3.1",
   "webpack": "^5.74.0",
   "webpack-cli": "^4.10.0"
}

// postcss.config.js
module.exports = {
   plugins: [
      require('postcss-preset-env')
   ]
}

// webpack.config.dev.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devtool: 'eval-source-map',
  output: {
    filename: 'js/main_[contenthash:8].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader', 
          'css-loader',
          'postcss-loader'
        ],
      },
      {
        test: /\.less$/i,
        use: [
          'style-loader', 
          'css-loader',
          'postcss-loader',
          'less-loader'],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        type: 'asset',
        generator: {
          filename: 'assets/[name]_[contenthash:8][ext]'
        },
        parser: {
          dataUrlCondition: {
            // 单位字节
            maxSize: 10*1024
          }
        }
      },
      {
        test: /\.(eot|ttf|woff2?)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[name]_[contenthash:8][ext]'
        },
      },
    ],
  },
  plugins: [
    // 插件执行顺序由插件内部的实现决定
    new HTMLWebpackPlugin({
      // 按需配置是否设置html模版
      template: './public/index.html'
    }),
      // 配置模版中的变量
    new DefinePlugin({
      BASE_URL: "'./'"
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public',
          globOptions: {
            ignore: [
              '**/index.html'
            ]
          }
        }
      ]
    })
  ]
};