首次操作 webpack

coolke
72 阅读4分钟

简介

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

代码预览：

本地安装

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

在本地安装 webpack 和 webpack-cli 还可以用 yarn 命令：

yarn add webpack webpack-cli --dev

安装后会自动生成一些文件。

注：

npm info webpack  //查看 webpack 信息
npx webpack --help //查看帮助文档

webpack 转译 JS

  • 创建 src 目录，内添加 index.js 和 x.js 文件并添加内容
  • 配置 webpack.config.js
    • 添加文件：webpack.config.js
    • 输入:
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(\_\_dirname, 'dist'),
    filename: '\[name].\[contenthash].js',
    //这里用 hash 的用途是便于添加缓存。缓存是HTTP协议里规定的。
  },
};

注：

1. `mode` 用于设置模式（`development`开发者模式；`production`用户模式）
2. hash 的作用：
   - 内容哈希就是每次修改之后，会生成一次新的哈希值，所以文件名会变化。
   - 如果内容不更新，就一直缓存，如果更新，就用新的文件名重新发送请求。加一个哈希值就相当于给文件加了一个版本号
  • 使用 npx webpack 进行转译
    • 会发现自动创建了一个 dist 目录并且里面有一个 main.js文件，文件内容就是转译的 JS。
    • 也就是说可以直接使用 webpack 命令，它会默认的把 index.js 转译成 main.js

使用 webpack

npx webpack

（npx 会自动帮我们找webpack在本地的哪个地方）

当我们使用后发现：多次使用 npx webpack 会不断生成新的dist文件内容，同时旧的文件会保留。这样导致占用不必要的内存。

可以在 package.json 文件中添加一句 "build": "rm -rf dist && webpack" 这样会在每次打包时会删除原来的文件。 image.png

此时改用：

yarn build

webpack-dev-server

在浏览器显示效果，能够保存后自动刷新。

步骤：

  1. 在webpack.config.js文件中mode设置为development并添加devtool和devServer

（这里注意可以和文件原有内容进行合并，重复的可以删掉）

    module.exports = {
      mode: 'development',
      devtool: 'inline-source-map',
      devServer: {
        static: './dist',
      },
    };

2. 在package.json文件中添加start

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

3. 安装

yarn add webpack-dev-server --dev

4. 打开

yarn start

webpack 生成 HTML

搜索关键词：webpack creat html

本地安装

yarn add html-webpack-plugin --dev

配置 webpack.config.js

（这里注意可以和文件原有内容进行合并，重复的可以删掉）

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

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],
};

用 yarn build 打包会发现dist目录会多出来一个index.html文件，并自动引入了main.js。当我们更改代码内容，打包后生成的index.html里的main.js的[contenthash]也会自动变化

webpack 引入 CSS

通过 import 将 CSS 引入 JS 文件

搜索关键词：webpack css loader

安装

yarn add css-loader --dev
yarn add style-loader --dev

配置

在文件 webpack.config.js 的 module.exports中添加module

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
        //如果发现.css结尾的文件名。"css-loader"会把文件内容读到JS里面，"style-loader"将其变成style标签放到head里面
      },
    ],
  },
};

添加 css 文件并将其引用到 JS 文件中。

使用插件提取 CSS 文件

搜索关键词：webpack css extract

安装

yarn add mini-css-extract-plugin --dev

配置 webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
        ],
      },
    ],
  },

这里的 use:[...]是替换掉了原有的use: ["style-loader", "css-loader"],

自由切换引入CSS的方式

上述介绍了两种引入css的方式，如何能自由切换两种模式呢？

  • 方法：
    • 新建一个文件命名 webpack.config.prod.js ，复制 webpack.config.js 的内容
    • 将webpack.config.prod.js 的use:[...]写成use: ["style-loader", "css-loader"],
    • 在package.json文件中"build": "rm -rf dist && webpack"改成"build": "rm -rf dist && webpack --config webpack.config.prod.js"
    • webpack.config.js 文件里的mode改成mode: 'development'
    • webpack.config.prod.js 文件里的mode改成mode: 'production'

这样我们可以：

  • 开发模式下可以使用 yarn start 进行浏览，CSS通过 link 标签引用。
  • 在生产模式下使用 yarn build生成CSS文件引用。

webpack 引入 SCSS

安装

yarn add sass-loader dart-sass --dev

配置 webpack.config.js

module: {
  rules: [
    {
      test: /\.scss$/i,
      use: [
        "style-loader",
        "css-loader",
        {
          loader: "sass-loader",
          options: {
            implementation: require('dart-sass')
          }
        },
      ],
    },
  ],
},

webpack 引入 LESS

安装

yarn add less-loader --dev

yarn add less --dev

配置 webpack.config.js

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

webpack 引入 Stylus

安装

yarn add stylus-loader stylus --dev

配置 webpack.config.js

module: {
  rules: [
    {
      test: /\.styl$/,
      use: [
        "style-loader",
        "css-loader",
        "stylus-loader",
      ],
    },
  ],
},

webpack 引入 图片

安装

yarn add file-loader --dev

配置 webpack.config.js

module: {
  rules: [
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      use: ["file-loader"],
    },
  ],
},

在 assets 文件创建一个图片。在index.js中使用import得到其路径，将路径放到img中。

import png from './assets/1.png'

const div = document.getElementById('app')
div.innerHTML = `<img src="${png}">`

使用懒加载

懒加载是不会直接加载出来，当触发事件后再进行加载。

  • 我们可以添加文件 lazy.js 。然后在 index.js 文件中用 import() 加载这个文件
  • 得到一个 promise。promise.then()写成功怎么样，失败怎么样。
//lazy.js

export default function lazy() {
  console.log("我是一个懒加载模块");
}

//index.js

const button = document.createElement('button')
button.innerText = '懒加载'
button.onclick = () => {
  const promise = import('./lazy.js')
  promise.then(
    (module) => {
      const fn = module.default
      fn()
    },
    () => { console.log('模块加载错误') }
  )
}
div.appendChild(button)

总结

image.png

loader 与 plugin 的区别

  • loader是 加载器，是用来加载文件的
    • 比如 babel-loader 是用来加载JS的，把高级的JS转译成低版本的JS
    • css-lorder 和 style-lorder 是用来加载CSS的，把css 变成页面中的标签
  • plugin是 插件，是用来加强webpack功能的
    • 比如HTMLWebpackPlugin是用来加载HTML的，miniCssExtractPlugin可以把多个CSS文件合并成一个CSS文件

总的来说，加载器主要用来加载文件，而插件的功能更加丰富

资料来源：
  1. 饥人谷前端课程
  2. webpack中文文档
avatar
文章
阅读
粉丝