【笔记】Webpack 入门-一一网

Webpack 入门

安装 webpack

# 查询 npm webpack 版本
npm info webpack

# 当前版本 webpack-5
# npm 安装
npm install -g webpack@5 webpack-cli@4
# 或 yarn 安装
yarn add webpack@5 webpack-cli@4 --dev
复制代码

安装位置

webpack 安装在当前目录的 node_modules/bin 目录下
本地目录使用 webpack ：

# 查看版本
./node_modules/.bin/webpack --version
# 或使用 npx 简化操作
npx webpack --version
复制代码

npx 在 node 本身有问题的时候可能会拒绝运行，此时应以第一种方法手动操作

初始设置

在当前项目目录下运行：

npm init -y 
npm install webpack webpack-cli --save-dev
复制代码

package.config.js 简单设置

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        // MD5 hash -> http caching
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
    },
};
复制代码

package.json script 设置：解决重复缓存文件

设置文件名 content hash 之后，如果文件有改动，就会重复生成一个MD5值不一样的文件。
通过修改 package.json script 属性可在每次 build 时清除重复文件并自动调用 webpack。

"scripts": {
   // 添加 build
  "build":"rm -rf dist && npx webpack",
  "test": "echo "Error: no test specified" && exit 1"
},
复制代码

自动生成 HTML

修改 package.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [new HtmlWebpackPlugin()],
};
复制代码

运行 yarn build 或者 npm run build 自动生成 index.html

引入 css

安装 css-loader

npm install --save-dev css-loader
复制代码

修改 webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};
复制代码

webpack-dev-server

webpack.js.org/guides/deve…

安装

npm install --save-dev webpack-dev-server
复制代码

修改 webpack.config.js

devServer: {
    static: {
        directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
},
复制代码

修改 package.json

添加：

"start": "webpack serve --open"
复制代码

webpack css extract – css 抽成文件

安装

npm install --save-dev mini-css-extract-plugin
复制代码

修改 webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  ],
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: (resourcePath, context) => {
                return path.relative(path.dirname(resourcePath), context) + "/";
              },
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};
复制代码

开发和生产使用不同的 webpack.config.js

首先需要两个文件，假设生产模式为: webpack.config.prod.js, 开发模式为: webpack.config.js, 另有基础配置文件: webpack.config.base.js.
修改package.json

"scripts": {
  "build": "rm -rf dist && webpack --config webpack.config.prod.js"
},
复制代码

build 供生产模式使用，start 供开发模式使用

webpack.config.js && webpack.config.base.js 内定义并引入 base

const base = require('./webpack.config.base.js')
复制代码

webpack.config.js && webpack.config.base.js 使用 base 内容

...base代表 base 内容

. 可以读取 base 内容的属性

例如:

module.exports = {
  ...base,
  mode: "production",
  plugins: [
    ...base.plugins,
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
  ],
  module: {
    rules: [
      ...base.module.rules,
      {
        test: /.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          },
          'css-loader',
        ],
      }
    ]
  }
};
复制代码

webpack loader 和 plugin 的区别

webpack 本身只能打包 js 文件，其他资源（css, 图片，jsx, coffee等）是无法被加载的，因此需要对应的loader进行加载。
plugin 用于扩展 webpack 的功能，不限于文件加载和转化。

loader

loader 也即加载器，顾名思义是用来加载文件并对文件进行转化，比如 style-loader 用于将 css 文件以 <style> 标签形式载入 HTML，babel-loader 可将高版本的 JavaScript 转译为适用于大多数浏览器（譬如IE）的普适版本代码。

plugin

plugin 也即插件，扩展了 webpack 的功能，不限于资源加载。在转化文件上往往能将多个文件进行转化，比如 HTMLWebpackPlugin 用来生成 HTML文件，*MiniCssExtractPlugin 可用于抽取多个 css 文件生成一个新 css 文件。

引入 SCSS

yarn add sass-loader dart-sass
复制代码

修改 webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          {
              loader: "sass-loader",
              options: {
                  implementation: require('dart-sass')
              }
          }
        ],
      },
    ],
  },
};

复制代码

file-loader 加载图片文件

yarn add file-loader --dev
复制代码

修改 webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          {
              loader: "sass-loader",
              options: {
                  implementation: require('dart-sass')
              }
          }
        ],
      },
    ],
  },
};

复制代码