webpack分享小记（webpack5有什么点可以分享）

25-02-20 14

如果您对webpack分享小记感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于webpack分享小记的详细内容，我们还将为您解答webpack5有什么点可以分享的相关问题，并

如果您对webpack分享小记感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于webpack分享小记的详细内容，我们还将为您解答webpack5有什么点可以分享的相关问题，并且为您提供关于38. WebPack 入口和出口＆局部安装webpack ＆ package.json中定义启动、53 webpack概念、webpack核心介绍、webpack使用、645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug、react闲谈——webpack1升级webpack2注意事项的有价值信息。

本文目录一览：

webpack分享小记（webpack5有什么点可以分享）
38. WebPack 入口和出口＆局部安装webpack ＆ package.json中定义启动
53 webpack概念、webpack核心介绍、webpack使用
645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug
react闲谈——webpack1升级webpack2注意事项

webpack分享小记（webpack5有什么点可以分享）

多入口多出口

通常项目的需求：

构建我们发布需要的 HTML、CSS、JS 文件
使用 CSS 预处理器来编写样式
处理和压缩图片
使用 Babel 来支持 ES 新特性
本地提供静态服务以方便开发调试

resolve模块路径解析

resolve.alias
resolve.extensions
resolve.modules
resolve.mainFiles
resolve.resolveLoader

loader 模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成

重要的几个概念：入口，loader，plugin，输出
loader 的匹配规则中有两个最关键的因素：一个是匹配条件（test,include,exclude,and,or,not），一个是匹配规则后的应用(loader名字)。 use 来指定需要用到的 loader 对于一些不需要解析依赖（即无依赖）的第三方大型类库等，可以通过这个字段来配置，以提高整体的构建速度。 module.noParse noParse: /jquery|lodash/

plugin 不过由于需要提供不同的功能，不同的插件本身的配置比较多样化。

copy-webpack-plugin复制文件
IgnorePlugin(内置插件) 忽略某些模块例如moment.js日期类库，里面有许多i18n代码，导致打包后的文件较大，而实际场景又不需要这些，忽略本地化的内容 new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

webpack-dev-server

before 在 webpack-dev-server 静态资源中间件处理之前，可以用于拦截部分请求返回特定内容，或者实现简单的数据 mock
after 在 webpack-dev-server 静态资源中间件处理之后，比较少用到，可以用于打印日志或者做一些额外处理。
中间件就是在 Express 之类的 Web 框架中实现各种各样功能（如静态文件访问）的这一部分函数。多个中间件可以一起协同构建起一个完整的 Web 服务器。
webpack-dev-middleware（express提供的webpack-dev-server静态服务能力的中间件）
webpack-dev-middleware 的好处是可以在既有的 Express 代码基础上快速添加 webpack-dev-server 的功能，同时利用 Express 来根据需要添加更多的功能，如 mock 服务、代理 API 请求等。
首先我们要明白，对于 webpack 的配置，其实是对外暴露一个 JS 对象，所以对于这个对象，我们都可以用 JS 代码来修改它

Hot Module Replacement

HMR 可以理解为增强版的 Hot Reloading，但不用整个页面刷新，而是局部替换掉部分模块代码并且使其生效，可以看到代码变更后的效果
webpack 内部运行时，会维护一份用于管理构建代码时各个模块之间交互的表数据，webpack 官方称之为 Manifest，其中包括入口代码文件和构建出来的 bundle 文件的对应关系
目前weback4.x中只需要将hot：true就可以了，不需要手动引入HotModuleReplacementPlugin

优化前端资源加载：

图片压缩，dataUrl,
分离代码，静态文件，利用浏览器缓存机制
js：按需加载代码（import）代码压缩（uglify：Tree shaking --删除没有用到的代码,有时候却没有删除掉，babel搞得鬼），sideEffects （https://github.com/webpack/webpack/blob/master/examples/side-effects/README.md）

提升webpack打包速度

resolve优化：

减少 resolve 的解析

resolve.extensions：用来表明文件后缀列表，默认查找顺序是 [''.js'', ''.json'']，如果你的导入文件没有添加后缀就会按照这个顺序查找文件。我们应该尽可能减少后缀列表长度，然后将出现频率高的后缀排在前面
resolve.alias：可以通过别名的方式来映射一个路径，能让 Webpack 更快找到路径
module.noParse：如果你确定一个文件下没有其他依赖，就可以使用该属性让 Webpack 不扫描该文件，这种方式对于大型的类库很有帮助

loader优化：

特别是因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低

优化 Loader 的文件搜索范围
HappyPack可以将 Loader 的同步执行转换为并行的
node_modules里面的代码都是编译过的，所以没有必要再去处理一遍，通过（ exclude: /node_modules/）排除掉
Babel 编译过的文件缓存起来，下次只需要编译更改过的代码文件即可，这样可以大幅度加快打包时间（loader: ''babel-loader?cacheDirectory=true''）

plugin优化

换种方式处理图片：我们可以直接使用 imagemin 来做图片压缩，编写简单的命令即可。然后使用 pre-commit 这个类库来配置对应的命令，使其在 git commit 的时候触发，并且将要提交的文件替换为压缩后的文件。不用每次运行打包项目都压缩图片
使用 DLLPlugin打包公共代码，将公共代码抽离成单独文件的优化方案（css）
optimization.concatenateModules:true 分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去

webpack 整个构建流程

38. WebPack 入口和出口＆局部安装webpack ＆ package.json中定义启动

如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时,直接读取。

创建一个webpack.config.js文件　　【目前这个文件名是写死的】　　

const path = require('path')        //请先执行 npm init   先安装NODE一些相关东西

module.exports = {
    //入口: 可以是字符串、数组、对象，这里我们入口只有一个，所以写一个字符串即可
    entry:'./src/main.js',
    //出口，通常是一个对象,path是路径（绝对路径），filename是导出的文件名
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

webpack.config.js

可以看出，获取绝对路径是动态获取然后用函数拼起来的，主要依赖Node里面的 path，这个path哪里来？那就要执行 npm init 安装预加载的东西才可以。【目录路径需要进入到工程然后执行语句】

当你执行完 npm init 就会生成一个 package.json 文件

然后你尝试执行 webpack语句，就可以正常打包了，打包他会在 webpack.config.js 找入口和出口，进行一系列的操作:

然后会打包，放入到指定的导出文件路径。

局部安装webpack

目前，我们使用的webpack是全局的webpack，如果我们想使用局部来打包呢？

因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。

所以通常一个项目，都有自己局部的webpack。‘’

项目中需要安装自己局部的webpack：

这里示例局部安装webpack3.6.0【Vue CLI3中已经升级到webpack4，但是它将配置文件隐藏了起来，所以查看起来不是很方便。】

npm install webpack@3.6.0 --save-dev　　　　允许这句话即可安装局部webpack3.6.0版本【目录路径需要进入到工程】

53 webpack概念、webpack核心介绍、webpack使用

webpack概念

Webpack 前端资源模块化管理和打包工具。可以将许多松散的模块按照依赖和引用关系打包成符合生产环境部署的前端资源。并将按需加载的模块进行代码分隔，等到实际需要的时候再加载。

开发环境：我们本地的环境或测试环境 development

生产环境：线上环境，比如：我们昨天讲的环境部署 production

为什么学习webpack

搭建前端开发环境（vue、react）、热更新、代码压缩等

但是webpack又依赖node环境。

node你接口不会写。你会安装node即可。

学习node的两层含义：1、写动态网站（写接口） 2、为前端开发环境服务

webpack官网

https://www.webpackjs.com/

准备工作

1、先安装node

2、安装webpack和webpack-cli

npm i webpack@4 webpack-cli@3 -g

webpack核心介绍

配置文件:webpack.config.js

注意：写js代码，同时webpack基于node，所以也可以写node相关的代码（不是写http服务）。最多用上：path、和commonjs规范

键名	概念	解释
context	入口起点	基础目录，绝对路径，用于从配置中解析入口起点(entry point)
entry	入口 (必须)	配置打包入口文件的名字
output	出口 (必须)	打包后输出到哪里, 和输出的文件名
module	加载器配置	在rules对应数组中, 定义对象规则
plugins	插件配置	配置插件功能（插件有着webpack不具备的某些功能，比如：压缩html文件）

webpack只认识js文件，像图片、css、字体件... webpack不认识，不认识的文件使用加载器处理

webpack有很多的插件。插件就是丰富webpack功能的。比如：压缩js

webpack使用

打包js代码

1、单入口单出口（主流）

/*
    webpack依赖node环境 。
    这个js文件中，写的虽然是js。但是所有的node相关的都可以写。

*/ 
const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.join( __dirname,'dist' ),//把entry（入口文件）打包到哪个目录 必须是个绝对路径
        filename:'bundle.js',//打包后生成的文件名
    }
}

//默认认为你要打包上线了，上线了就是说要部署到服务器生产环境（要把所有的代码压缩）

2、多入口单出口

module.exports = {
    context:path.join(__dirname,"src"),
    entry:['./main.js','./test1.js'],
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    }
}

3、多入口多出口

module.exports = {
    context:path.join(__dirname,"src"),
    entry:{
        first:'./main.js',
        second:'./test1.js'
    },
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].js'
    }
}

打包css

webpack是基于node的。而node只认识js文件。css是不能直接打包的。所以要找对应认识某文件的loader（加载器）

module属性。

讲这个案例的目的：

1、处理不了文件用对应的loader。webpack对一些loader模块的版本是有要求。

2、devDependencies深刻认识。（开发依赖） devpendencies：项目依赖

步骤：

css-loader 3版本 style-loader 2版本

npm i css-loader@3 style-loader@2 -D

devDependencies：开发依赖（上线是不需要的，只是开发的时候才使用），只开发阶段使用，线上不需要。

dependencies：项目依赖，无论上线还是开发阶段都需要，

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

分离css

extract-text-webpack-plugin@next 插件

安装下载

npm i extract-text-webpack-plugin@next -D

加载器修改配置

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
rules: [ // 加载器的使用规则
	{
		test: /\.css$/,
		use: ExtractTextPlugin.extract({ // 从一个已存在的 loader 中，创建一个提取(extract) loader。
			fallback: "style-loader", 
        	use: "css-loader"  // loader被用于将资源转换成一个CSS单独文件
        })
	}
]

插件配置

new ExtractTextPlugin("style.css"), // 输出的文件名

报错说明：

Error: Cannot find module 'webpack/lib/Chunk'

解决方案：在项目目录下下载webpack@4

打包less

需要安装less 和 less-loader 来解析less代码, 和加载less文件

npm i less@3 less-loader@7 -D

在webpack.config.js中配置加载器, 解析.less文件

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

但是这样发现css代码没有分离出来, 所以还需要使用extract-text-webpack-plugin的配置, 分离出css代码

{ 
	test: /\.less$/, 
	use: ExtractTextPlugin.extract({ 
		fallback: "style-loader", 
		use: ['css-loader', "less-loader"]
	})
}

观察打包后style.css中多了less文件里的样式代码

生成html

html-webpack-plugin插件。

下载

npm i html-webpack-plugin@4 -D

注意：插件需要显示的引入到webpack.config.js中

plugins属性

plugins:[
        new HtmlWebpackPlugin({ // 插件配置对象
            title: "webpack 的使用",
            filename: "index.html", // 产出文件名(在dist目录查看)
            template: __dirname + "/index.html", // 以此文件来作为基准(注意绝对路径, 因为此文件不在src下)
            favicon: "./assets/favicon.ico", // 插入打包后的favicon图标
            minify: {                             //对html文件进行压缩，
                    collapseBooleanAttributes: true,  //是否简写boolean格式的属性如：disabled="disabled"简写为disabled
                    minifyCSS: true,                  //是否压缩html里的css（使用clean-css进行的压缩） 默认值false
                    minifyJS: true,                   //是否压缩html里的js（使用uglify-js进行的压缩）
                    removeAttributeQuotes: true,      //是否移除属性的引号 默认false
                    removeComments: true,             //是否移除注释 默认false
                    removeCommentsFromCDATA: true,    //从脚本和样式删除的注释, 默认false
             }
        }) // 数组元素是插件的new对象
    ]

报错说明

Cannot find module "webpack/lib/node/NodeTeplatePlugins"

在安装html-webpack-plugin插件的工程中, 单独的在本地安装一下跟全局webpack对应的版本

npm i webpack@4 -D

处理css中的资源（图片和字体）

我们的背景图片和自定义图标放在src的assets文件夹下。html中引入的图片：logo放置在static文件夹下（不需要打包，它只是copy一份）。

需要下载2个加载器模块

url-loader、file-loader

下载：

npm i url-loader file-loader -D

注意: webpack认为, 图片也是一个模块, 所以才需要loader来解析图片)

2.webpack.config.js加载器配置:

在module中加上此配置。

 {
       test: /\.(png|jpg|jpeg|gif|svg)$/, // 处理这些结尾的文件
        use: 'url-loader'
 }

// 如果处理字体图标需要引入这个
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader'
}

使用jquery（面向模块化开发）

在webpack打包的项目中, 使用jQuery功能

下载jquery模块,

npm i jquery

在main.js中引入jquery,

import $ from 'jquery'

热更新

webpack-dev-server会实时监听文件变化, 自动打包到内存中, 而不是生成硬盘上的dist目录

webpack-dev-server 它还会启动一个本地的服务器, 来支持你访问打包后的html网页

下载webpack-dev-server -g

npm i webpack-dev-server -g

webpack-dev-server --version

在项目下运行命令: webpack-dev-server 可启动热更新服务器, 会根据目录下的webpack.config.js,只是在内存中运行起来了。

注意: 如果修改了配置(webpack.config.js)文件, 还是需要重启终端, 如果是src下的代码, 会自动打包

注意: 默认需要打包输出的文件名必须为 index.html文件

默认在端口号:8080上启动我们热更新服务器, 项目都在这个服务器上打开访问

当开发完毕还需要使用webpack命令进行打包到dist目录。

webpack.config.js配置：

devServer: { // 在这里可以对webpack-dev-server进行一些配置
        port: 9090, //修改端口号，默认为8080
        open: true, // 自动调用默认浏览器打开
}

645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug

^-

前端小菜鸟，喜欢前端，不断学习
微信：jie178463596
微信小群：纯粹讨论技术、面试、工作为主，划水少，拒绝广告

认识Plugin

CleanWebpackPlugin

HtmlWebpackPlugin

生成的index.html分析

自定义HTML模板

自定义模板数据填充

DefinePlugin的介绍

DefinePlugin的使用

copyWebpackPlugin

目录结构

wk.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack'); // DefinePlugin是webpack内置插件
const copyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "js/bundle.js",
    // 必须是一个绝对路径
    path: path.resolve(__dirname, "./build"),
    // assetmodulefilename: "img/[name].[hash:6][ext]"
  },
  module: {
    rules: [
      {
        // 规则使用正则表达式
        test: /\.css$/, // 匹配资源
        use: [
          // { loader: "css-loader" },
          // 注意: 编写顺序(从下往上, 从右往做, 从后往前)
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          "postcss-loader"
        ],
        // loader: "css-loader"
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        // type: "asset/resource", file-loader的效果
        // type: "asset/inline", url-loader
        type: "asset",
        generator: {
          filename: "img/[name].[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
      },
      {
        test: /\.ttf|eot|woff2?$/i,
        type: "asset/resource",
        generator: {
          filename: "font/[name].[hash:6][ext]"
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "哈哈 webpack",
      template: "./public/index.html"
    }),
    new DefinePlugin({
      // 要包裹两层引号
      BASE_URL: '"./"'
    }),
    new copyWebpackPlugin({
      patterns: [
        {
          // to: xxx, // 不用写，默认会使用output.path
          from: "public",
          globOptions: {
            ignore: [
              "**/index.html",
              "**/.DS_Store",
              "**/abc.txt"
            ]
          }
        }
      ]
    })
  ]
}

publuc/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

build/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <link rel="icon" href="./favicon.ico">
    
    <title>杰帅的webpack</title>
  <script defer src="js/bundle.js"></script></head>
  <body>
    <noscript>
      <strong>We're sorry but 杰帅的webpack doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

react闲谈——webpack1升级webpack2注意事项

webpack1已结不再维护了，官方在主推webpack2，原先使用webpack1的用户，想要使用v2，只需要做几个配置小改动即可。

我们只关注常用的配置选项，不常用的不做解释。

1、resolve配置

以前你可能这么写：

resolve: {
    extensions: ['','.jsx','.js','.json'],modulesDirectories: ['node_modules','src'],alias: {
        actions: __dirname + `/src/actions`,components: __dirname + `/src/components`,containers: __dirname + `/src/containers`,reducers: __dirname + `/src/reducers`,store: __dirname + `/src/store`
    }
}

现在你该这么写：取消了空字符串

resolve: {
    extensions: ['.js','.less','.scss','.css'],modules: [
      path.resolve(__dirname,'node_modules'),path.join(__dirname,'./src')
    ]
  }

2、module配置

以前你可能这么写：
module: {

loaders: [{
        test: /\.(js|jsx)$/,loaders: ['react-hot','babel-loader'],exclude: /node_modules/
    },{
        test:   /\.(less|css)$/,loader: "style-loader!css-loader!less!postcss-loader"
    },{
        test: /\.(png|jpg|gif|svg)$/,loader: 'file?name=[md5:hash:base64:10].[ext]'
    },{
        test: /\.json$/,loader: 'json'
    },{
        test: /\.md$/,loader: 'file?name=[name].[ext]'
    }]
}

现在你该这么写：

a、外层loaders改为rules

b、内层loader改为use

c、所有插件必须加上-loader，不再允许缩写，所以react-hot不需要再配置。

d、不再支持使用！连接插件，请使用数组形式。

e、json-loader已经被移除，不需要手动添加，webpack会帮你处理好这些事情。

module: {
      rules: [{
          test: /\.(js|jsx)$/,use: ['babel-loader'],exclude: /node_modules/,include: path.join(__dirname,'src')
      },{
          test: /\.(less|css)$/,use: ["style-loader","css-loader","less-loader","postcss-loader"]
      },{
          test: /\.(png|jpg|gif|md)$/,use: ['file-loader?limit=10000&name=[md5:hash:base64:10].[ext]']
      },{
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,use: ['url-loader?limit=10000&mimetype=image/svg+xml']
      }],}
};

3、plugins配置

以前你可能这么写：

new webpack.optimize.OccurenceOrderPlugin(),new webpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin(),new webpack.optimize.UglifyJsPlugin()

现在你该这么写：

a、移除了OccurenceOrderPlugin 和 NoErrorsPlugin

b、更多plugins配置请参考 https://webpack.js.org

new webpack.HotModuleReplacementPlugin(),new webpack.optimize.UglifyJsPlugin()

==============================================================

以上几个常用配置变化的比较明显，没有修改的配置会报错导致webpack无法使用，请注意遵守webpack2规则。

最后贴上一份webpack.config.js基础配置，查看该配置完整项目请点击：react-webpack2

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var precss = require('precss');

//判断当前运行环境是开发模式还是生产模式
const nodeenv = process.env.NODE_ENV || 'development';
const isPro = nodeenv === 'production';

console.log("当前运行环境：",isPro)

var plugins = []
if (isPro) {
  plugins.push(
      new webpack.optimize.UglifyJsPlugin({
          compress: {
              warnings: false
          }
      }),new webpack.DefinePlugin({
          'process.env':{
              'NODE_ENV': JSON.stringify(nodeenv)
          }
      })
  )
} else {
  plugins.push(
      new webpack.DefinePlugin({
          'process.env':{
              'NODE_ENV': JSON.stringify(nodeenv)
          },BASE_URL: JSON.stringify('http://localhost:9009'),}),// new webpack.optimize.OccurenceOrderPlugin(),new webpack.HotModuleReplacementPlugin()
      // new webpack.NoErrorsPlugin()
  )
}

module.exports = {
  devtool: false,entry: {
    app: [
      'webpack-hot-middleware/client?path=http://localhost:3011/__webpack_hmr&reload=true&noInfo=false&quiet=false','babel-polyfill','./src/index'
    ]
  },output: {
    filename: '[name].js',path: path.join(__dirname,'build'),publicPath: 'http://localhost:3011/build/',chunkFilename: '[name].js'
  },// BASE_URL是全局的api接口访问地址
  plugins,// alias是配置全局的路径入口名称，只要涉及到下面配置的文件路径，可以直接用定义的单个字母表示整个路径
  resolve: {
    extensions: ['.js','./src')
    ]
  },module: {
      rules: [{
          test: /\.(js|jsx)$/,}
};

我们今天的关于webpack分享小记和webpack5有什么点可以分享的分享就到这里，谢谢您的阅读，如果想了解更多关于38. WebPack 入口和出口＆局部安装webpack ＆ package.json中定义启动、53 webpack概念、webpack核心介绍、webpack使用、645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug、react闲谈——webpack1升级webpack2注意事项的相关信息，可以在本站进行搜索。

本文标签：