webpack基本配置【二】

sanyue科研 lv.1

发布时间：2022-10-31 19:54:43 298

相关标签： # javascript# css# java# java# 工具

当一个前端应用越来越复杂的时候，一般通过把应用的代码按照功能划分不同的模块，单独维护，这样提高开发的效率、降低开发的成本。

那么构建工具webpack呢，它本质上还是一个模块化打包工具。任何的模块都可以通过loader机制来处理，最终被打包到一起。

webpack有两个核心的特性：Loader特性和插件机制。

webpack的作用

webpack本身可以解决模块化代码打包，把零散的代码打包到一个js文件中。
对于有兼容问题的代码，webpack在打包过程中通过Loader机制实现编译转换，然后再打包；
对于不同类型的前端模块，比如css文件。webpack支持在JavaScript中通过模块化的方式引入任意类型的文件资源，例如：通过webpack可以在JavaScript中加载css，被加载的css，则通过style标签的范式执行。
webpack具备代码拆分能力，应用中所有的模块，可以根据我们的分块进行打包，避免所有代码打包到一起，产生的单个文件很大，导致加载速度慢的问题。我们可以先把初次加载所需要的模块打包到一起，其他模块单独打包，再通过异步加载来加载该模块。

基本配置：
webpack.config.js：

import { Configuration } from "webpack";
const path = require("path");

// 智能提示
/**
 * @type {Configuration}
 */
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  }
}

Loader 机制

加载资源模块。然而webpack内部的Loader机制智能加载js模块，如果要加载其他类型的模块，就要添加对应模块的loader。比如需要加载css文件，则需要安装依赖css-loader和style-loader：

const path = require("path");

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 根据打包过程中所遇到文件路径匹配是否使用这个 loader
        use: ['style-loader','css-loader'] // 指定具体的 loader
      }
    ]
  }
}

插件机制横向扩展

实现自动打包之前删除dist文件【上次打包】
自动生成应用所需的HTML文件
给不同环境代码设置可变动的部分，比如API地址
拷贝不需要打包的文件到输出目录
压缩打包后的文件
自动部署：自动发布打包的文件到服务器

1、删除dist文件

安装依赖npm install clean-webpack-plugin --save-dev；

webpack.config.js：

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 删除打包文件

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.css$/, // 根据打包过程中所遇到文件路径匹配是否使用这个 loader
        use: ['style-loader', 'css-loader'] // 指定具体的 loader
      }
    ]
  }
}

2、自动生成应用所需的HTML文件

和手动写的HTML相比较，自动生成的HTML的好处就是HTML也打包到dist目录下，发布时只需要上传dist文件到服务器就好。另一个就是自动生成的HTML中的script标签自动引入，能够保证资源文件的路径是正确的。

安装依赖：npm install html-webpack-plugin --save-dev webpack.config.js配置：

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 删除打包文件
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.css$/, // 根据打包过程中所遇到文件路径匹配是否使用这个 loader
        use: ['style-loader', 'css-loader'] // 指定具体的 loader
      }
    ]
  }
}

通过HTML模板来生成index.html文件：

模板：


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>

</head>

<body>

  <div class="container">

    <h1>页面上的基础结构</h1>

    <div id="root"></div>

  </div>

</body>

</html>

配置：

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 删除打包文件
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '设置HTML的title标签内容',
      meta: {
        viewport: 'width=device-width'
      },
      template: "./src/index.html"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/, // 根据打包过程中所遇到文件路径匹配是否使用这个 loader
        use: ['style-loader', 'css-loader'] // 指定具体的 loader
      }
    ]
  }
}

如果想生成其他的HTML文件，可以这样设置：

: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '设置HTML的title标签内容',
      meta: {
        viewport: 'width=device-width'
      },
      template: "./src/index.html"
    }),
    // 用于生成 about.html
    new HtmlWebpackPlugin({
      filename: 'about.html'
    })
  ],

复制文件

在应用中有一些文件参与打包的静态文件，比如favicon、robots.txt

安装依赖：npm install copy-webpack-plugin --save-dev 配置：

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 删除打包文件
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '设置HTML的title标签内容',
      meta: {
        viewport: 'width=device-width'
      },
      template: "./src/index.html"
    }),
    new CopyWebpackPlugin({ patterns: ['public'] })
  ],
  module: {
    rules: [
      {
        test: /\.css$/, // 根据打包过程中所遇到文件路径匹配是否使用这个 loader
        use: ['style-loader', 'css-loader'] // 指定具体的 loader
      }
    ]
  }
}

文章来源： https://blog.51cto.com/u_12344418/5802177

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。