webpack-快速使用

· 569 words · 2 minute read

webpack 的作用 🔗

在传统的 web 开发项目中，需要引入大量的 js 文件和 css 文件等， 可能出现命名冲突，页面体积变大。webpack 把模块化的代码转化为浏览器可执行的代码。

实践 🔗

创建一个前端项目 🔗

mkdir webpack_startup && cd webpack_startup

yarn init -y 生成的 package json 文件内容取默认值。

yarn add webpack webpack-cli --dev 将依赖安装到开发环境依赖下。因为 webpack 只会在开发过程中用到，在运行时不会用到。

用 vscode 打开，新建 src 目录和 index.html(html:5 快速生成 html)。

npx webpack 打包命令， 生成 dist 目录多了 main.js 文件。

webpack 配置文件 🔗

新建 webpack.config.js 配置文件， 运行在 node.js 环境下，可以直接使用 path 之类的 node.js 内置模块。

css 部分 🔗

yarn add --dev style-loader css-loader

在 webpack.config.js 中配置

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      }
    ]
  }

加载图片 🔗

在 webpack.config.js 中配置

module: {
  rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      }
  ]
}

在 webpack 中使用插件， 例如自动生成 html 文件 🔗

yarn add html-webpack-plugin --dev

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [new HtmlWebpackPlugin()],
};

兼容低版本的浏览器 🔗

安装 babel loader，yarn add --dev babel-loader @babel/core @babel/preset-env

添加 webpack.config.js 中添加配置

module.exports = {
  module: {
    rules: [
        {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }

}

结果文件压缩 🔗

安装插件，yarn add --dev terser-webpack-plugin

修改配置。

const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
      }),
    ],
  },
};

修改时自动打包并刷新页面 🔗

安装依赖，yarn add --dev webpack-dev-server。 修改 webpack.config.js 文件

module.exports = {
  devServer: {
    static: "./dist",
    open: true,
    hot: true,
  },
};

在 package.json 添加

  "scripts": {
    "start": "webpack serve --open",
  }

执行 yarn start 即可。

给目录设置别名 🔗

module.exports = {
  resolve: {
    alias: {
      utils: path.resolve(__dirname, "src/utils"),
    },
  },
};

分析结果文件大小 🔗

yarn add --dev webpack-bundle-analyzer

const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};
前端