webpack学习笔记总结_umi webpack loader-CSDN博客

本文链接：https://blog.csdn.net/Robergean/article/details/120286147

webpack

官网

作用：是一个模块打包器，将有依赖关系的资源经过 webpack 打包处理成独立的静态资源

概念

入口(entry)

指示 webpack 应该使用哪个模块，来作为构建其内部依赖关系的开始

默认值是 ./src/index.js

输出(output，出口)

告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件

插件(plugin)

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。

模式(mode)

development - 开发模式
production - 生产模式
none

使用

安装

创建 package.json 文件：

$ npm init -y

安装 webpack 及 webpack-cli：

$ npm i webpack-cli webpack --save-dev

创建目录结构

webpack-demo
    |- package.json
    |- index.html
    |- /src
        |- index.js

index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

index.js：

function component() {
  const element = document.createElement('div');

  // lodash（目前通过一个 script 引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

创建一个 bundle

稍作修改目录结构：

webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js
Tip

修改文件内容：

index.js：

+import _ from 'lodash';
+
 function component() {
   const element = document.createElement('div');

-  // lodash（目前通过一个 script 引入）对于执行这一行是必需的
+  // lodash 在当前 script 中使用 import 引入
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

 document.body.appendChild(component());

在此 import 了 lodash 库，所以需要安装该库：

$ npm i lodash

index.html：

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>起步</title>
-    <script src="https://unpkg.com/lodash@4.17.20"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
 </html>

在 dist 目录下没有 main.js 文件，该文件需要经过 webpack 处理后动态构建，利用如下命令来创建 main.js 命令：

$ npx webpack

打包后命令行提示类似如下结果：

asset main.js 69.5 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1010 bytes 5 modules
cacheable modules 532 KiB
  ./src/index.js 272 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.52.0 compiled with 1 warning in 4943 ms

配置文件

在项目根目录下创建 webpack.config.js 文件：

module.exports = {
  mode: 'development', // 模式
  entry: './src/main.js', // 入口
  output: { // 输出
    path: __dirname + '/dist', // 输出文件所在的目录
    filename: 'js/app.[chunkhash].js' // 主输出文件名
  }
}

在命令行下提示 npx webpack 会默认到项目根目录下查找 webpack.config.js 配置命令执行构建。

插件

html-webpack-plugin

$ npm i --save-dev html-webpack-plugin

修改配置文件：

const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development', // 模式
  entry: './src/main.js', // 入口
  output: { // 输出
    path: __dirname + '/dist', // 输出文件所在的目录
    filename: 'js/app.[chunkhash:8].js' // 主输出文件名
  },
  plugins: [ // 插件
    new HTMLWebpackPlugin({
      template: __dirname + '/public/index.html',
      filename: 'index.html'
    })
  ]
}

loader

style-loader、css-loader

$ npm i style-loader css-loader --save-dev

css-loader 用于识别 css 资源，style-loader 是在 <head> 中添加 <style> 节点来显示 css 资源

修改配置：

const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development', // 模式
  entry: './src/main.js', // 入口
  output: { // 输出
    path: __dirname + '/dist', // 输出文件所在的目录
    filename: 'js/app.[chunkhash:8].js' // 主输出文件名
  },
  plugins: [ // 插件
    new HTMLWebpackPlugin({
      template: __dirname + '/public/index.html',
      filename: 'index.html'
    })
  ],
  module: {
      rules: [
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'],
        },
      ],
    }
}

sass-loader、node-sass：主要用于编译 SCSS 文件

$ npm i sass-loader node-sass -D

less-loader、less：主要用于编译 less 文件
file-loader：文件处理(如复制)
url-loader：文件（包括媒体资源）处理，与 file-loader 类似，可以在资源小于指定大小时生成 base64 格式数据
vue-loader：主要是用于在 webpack 中处理 *.vue 单文件组件

多页应用相关配置

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: {
    'js/login': './src/js/login.js',
    'js/detail': './src/js/detail.js'
  },
  output: {
    path: path.join(__dirname, '../dist'),
    filename: '[name].[chunkhash:8].js'
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: './public/html/login.html',
      filename: 'html/login.html',
      chunks: ['js/login']
    }),
    new HTMLWebpackPlugin({
      template: './public/html/detail.html',
      filename: 'html/detail.html',
      chunks: ['js/detail']
    }),
  ]
}

webpack-dev-server

在开发模式下启动开发服务器，编写 npm scripts：

{
  "scripts": {
    "dev": "webpack serve --config config/webpack.conf.dev.js",
    "build": "webpack --config config/webpack.conf.prod.js"
  },
}