隔壁王老二每天学这篇webpack，半年后，无数女人为之芳心-创新互联

什么是webpack?

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
创新互联于2013年开始，先为昌图等服务建站，昌图等地企业，进行企业商务咨询服务。为昌图企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。Webpack安装
```
npm install -g webpack webpack-cli
```

配置文件

package.json同级目录新建webpack.config.js

基本配置

入口  entry   "./src/index.js"


出口 output  filename  "main.js"

	path  const path=require("path")  path.resolve(__dirname, "dist")

	clean:true 自动清理历史残留

解析路径

resolve
	      配置  resolve:{

        alias:{

            "@":path.resolve(__dirname, "src")

        }

    }
	      导入   import { createButton } from "@/utils/createbutton";

npm 自定义指令

```
npm run build

npm webpack
```
资源加载
webpack默认只能加载js和json资源
其他资源类型（img/css/vue）需要安装加载器loader
css 加载器安装

npm install --save-dev style-loader css-loader

编写规则

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

image

webpack 5 中，可以使用内置的 Asset Modules
编写规则

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

加载字体

webpack 5 中，可以使用内置的 Asset Modules
加载数据
json 默认支持
csv

npm install --save-dev csv-loader

配置   {
          test: /\.(csv|tsv)$/i,
          use: ['csv-loader'],
        },

xml

npm install --save-dev xml-loader

配置  {
         test: /\.xml$/i,
         use: ['xml-loader'],
            },

less加载器

```
npm install less less-loader --save-dev
```
编写规则

   {
               test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },

插件

HtmlWebpackPlugin
html5自动生成并引入bundle包

安装

npm install --save-dev html-webpack-plugin

配置

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

plugins: [new HtmlWebpackPlugin()],

MiniCssExtractPlugin

将css从js中剥离减少js文件大小
安装

npm install --save-dev mini-css-extract-plugin

配置

plugins: [new MiniCssExtractPlugin()],

use: [MiniCssExtractPlugin.loader, "css-loader"],

CssMinimizerWebpackPlugin

将css压缩
安装

npm install css-minimizer-webpack-plugin --save-dev

配置

optimization: {
      minimizer: [
            new CssMinimizerPlugin(),
        ],

    },

TerserWebpackPlugin

webpack5 自带不需要安装将html压缩
配置

const TerserPlugin = require("terser-webpack-plugin");

优化配置

optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },

开发环境

开发环境 mode:"development"
source map 代码映射 devtool: 'inline-source-map',
开发工具 webpack-dev-server

npm install --save-dev webpack-dev-server

devServer:{

        open:true,

        host:"192.168.0.10",

        port:9090

    }

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

网站栏目：隔壁王老二每天学这篇webpack，半年后，无数女人为之芳心-创新互联
转载来于：http://myzitong.com/article/cdjooi.html

隔壁王老二每天学这篇webpack，半年后，无数女人为之芳心-创新互联

其他资讯