webpack配置

webpack

init

mkdir blog
cd blog
yarn init -y
//安装webpack  (--dev安装在开发环境)
yarn add webpack webpack-cil --dev

核心部分：配置文件，只能判断代码逻辑

通过loader打包不同类型的文件，通过plugin在打包的过程中优化处理

常用插件loader

style-loader
css-loader
​
//自动生成打包后引入的html插件 (插件)
html-webpack-plugin
​
//ES6以后的代码转换为ES6之前的
babel-loader  @babel/core @babel/preset-env
​
//压缩打包后的js代码
terser-webpack-plugin
​
//改变代码自动打包webpack
webpack-dev-server
​
//压缩打包后的文件体积 (插件)
yarn add --dev terser-webpack-plugin
​
//可视化webpack打包后的文件体积
webpack-bundle-analyzer

配置好后的文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerseWebpackPlugin = require("terser-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
​
module.exports = {
  //开发工具
  devtool: "inline-source-map",
  //开发模式
  mode: "development",
  //入口文件
  entry: "./src/index.js",
  //出口文件
  output: {
    //输出文件名为不重复的哈希文件名，防止缓存
    filename: "[name].[contenthash].js",
    //输出路径
    path: path.resolve(__dirname, "dist"),
  },
  //压缩代码空白，简化代码
  optimization: {
    minimize: true,
    minimizer: [new TerseWebpackPlugin()],
  },
  resolve: {
    //自动解析确定的扩展
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  //模块加载器
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"],
      },
      {
        //匹配到js文件
        test: /\.js$/,
        //排除node_modules文件夹
        exclude: /node_modules/,
        //使用babel-loader转换
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  //插件
  plugins: [
    new HtmlWebpackPlugin({
      title: "Output Management",
    }),
    new BundleAnalyzerPlugin(),
  ],
};
​