Webpack部署本地服务器目的完成自动编译常用方式: webpack-dev-serverwebpack-dev-server 是一个用于开发环境的 Web 服务器，它集成了 Webpack，并提供了实时重新加载和热替换等功能。以下是一个简单的 webpack-dev-server 配置和使用示例：1.首先，确保已经安装了 webpack, webpack-cli 和 webpack-dev-server。如果没有安装，可以使用以下命令进行安装：1npm install --save-dev webpack webpack-cli webpack-dev-server -D   // 开发环境2.在项目根目录下创建一个名为 webpack.config.js 的文件，用于存放 Webpack 配置信息：1234567891011121314151617const path = require('path');module.exports = {  entry: './src/index.js',  output: {    filename: 'main.js',    path: path.resolve(__dirname, 'dist'),  },  devServer: {    contentBase: path.join(__dirname, 'dist'),    // 是否为静态文件开启 gzip compression 默认是false    compress: true,    port: 9000,    // open 是否打开浏览器, 默认是 false     open: true,    hot: true,  },};这个配置文件定义了入口文件为 src/index.js，输出文件为 dist/main.js，并配置了 webpack-dev-server 的相关参数。3.在项目的 package.json 文件中添加一个启动脚本：12345{  "scripts": {    "serve": "webpack serve"  }}现在，可以通过运行 npm run serve 命令来启动 webpack-dev-server。服务器将在端口 9000 上启动，并在默认浏览器中打开 http://localhost:9000。当你对 src/index.js 文件进行更改时，服务器将自动重新加载和热替换。 认识模块热替换（HMR）什么是 HMRp HMR的全称是Hot Module Replacement，翻译为模块热替换；p 模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；HMR 通过如下几种方式, 来提高开发的速度p 不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；p 只更新需要变化的内容，节省开发的时间；p 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；如何使用 HMR默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可**（默认已经开启）；**在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是live reloading；host 配置host设置主机地址：默认值是localhost；如果希望其他地方也可以访问，可以设置为 0.0.0.0；port、open、compressport设置监听的端口，默认情况下是8080open是否打开浏览器：默认值是false，设置为true会打开浏览器；也可以设置为类似于 Google Chrome等值；compress是否为静态文件开启gzip compression：默认值是false，可以设置为true；

什么是文件指纹文件指纹是文件打包后输出的文件名的后缀，通常用来做一些文件的版本管理文件指纹的作用• 用作版本管理时，如果一个项目需要发布，只需要发布修改过的文件指纹；• 对于没有修改过的文件，用户在访问的时候，依旧可以使用浏览器缓存好的，无需二次加载，加速页面访问。文件指纹策略• Hash和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会更改，并且全部文件都共用相同的hash值• Chunkhash和webpack打包的chunk有关，不同的entyr会生成不同的Chunkhash值（一个页面的值改变了并不会影响另一个页面，js文件一般采用此方法），chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。• Contenthash根据文件内容来定义hash，文件内容不变，则contenthash不变（css文件一般采用此方法）。比如文件index.css被index.js引用了，所以共用相同的chunkhash值。但是这样子有个问题，如果index.js更改了代码，css文件就算内容没有任何改变，由于是该模块发生了改变，导致css文件会重复构建。这个时候，我们可以使用extra-text-webpack-plugin里的contenthash值，保证即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，那么不会重复构建。hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器上拉取对应数据，进而更新本地缓存。但是在实际使用的时候，这几种hash计算还是有一定区别。占位符介绍占位符名称定义[ext]资源后缀名[name]文件名称[path]文件的相对路径[folder]文件所在的文件夹[contenthash]文件的内容hash，默认是md5生成[hash]文件的内容hash，默认是md5生成[emoji]一个随机的指代文件内容的emoji文件指纹的设置根据不同的文件类型一般选择不同的文件指纹策略，通常情况下：• JS文件采用[chunkhash]文件指纹策略• CSS文件采用[contenthash]文件指纹策略• JS文件采用[hash]文件指纹策略下面我们来介绍下几种用法JS文件指纹设置设置output的filename，使用[chunkhash]，chunkhash没办法和热更新一起使用的，不能与HotModuleReplacementPlugin这个插件一起使用，所以我们只在生产环境写。1234output: {                               //打包输出文件        path: path.join(__dirname, 'dist'),        filename: '[name]_[chunkhash:8].js' //chunkhash指纹策略，截取前面8个字符    }图片文件指纹设置设置file-loader的name，使用[hash]。12345678910111213module: {        rules: [            {                test: /.(png|jpg|gif|jpeg)$/,                use: {                    loader: "url-loader",                    options: {                        name: '[name]_[hash:8].[ext]',                        limit: 10240 //不超过10K时，将其转化为base64                    }                }            },    },CSS文件指纹设置CSS文件指纹策略比较特殊，我们需要用到MiniCssExtractPlugin，设置MiniCssExtractPlugin 的 filename，使用[contenthash]。正常情况下，如果我们使用了style-loader和css-loader的话，那么这个css会由style-loader将css插入到style里面，并且放到head头部，此时并没有一个独立的css文件，因此，我们通常会采用MiniCssExtractPlugin，通过这个插件把这个style-loader的css提取成一个独立的文件，所以，对于这个css的文件指纹，我们会设置在这个MiniCssExtractPlugin里面，给它设置一个filename，并且给它设置一个[contenthash]。注意：MiniCssExtractPlugin这个插件没办法与style-loader一起使用，因为它们之间的功能是互斥的，所以需要将style-loader换成MiniCssExtractPlugin.loader。设置步骤首先安装MiniCssExtractPlugin1npm i -D mini-css-extract-plugin配置webpack.config.js123456789const MiniCssExtractPlugin = require('mini-css-extract-plugin');......module.exports = {        plugins: [        new MiniCssExtractPlugin({            filename: '[name][contenthash:8].css'        })    ],}文件指纹项目应用将webpack.config.js文件更名为webpack.dev.js并将内部的mode修改为development，再复制一份文件，更名为webpack.prod.js将mode修改为production。然后需要修改配置文件package.json区分production和development123456"scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "build": "webpack --config webpack.prod.js",    "watch": "webpack --watch --progress",    "dev": "webpack-dev-server -config webpack.dev.js --open"  }完成上述步骤，我们在项目中就可以根据生产环境和开发环境不同，配置不同的文件指纹。原文链接：https://blog.csdn.net/huangbiao86/article/details/123121470

如题，自定义配置的webpack无法实现静态图片替换，如何使用webpack实现静态图片替换。

1. 摘要Webpack是一种前端资源构建工具，一个静态模块打包器。在Webpack看来，前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理，当Webpack处理应用程序时，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。Webpack打包流程图如图1-1所示。图1-1 Webpack打包流程图2. Webpack五个核心概念2.1 Entry入口(Entry)指示Webpack以哪个文件作为入口起点分析构建内部依赖图并进行打包。2.2 Output输出(Output)指示Webpack打包后的资源bundles输出到哪里去，以及如何命名。2.3 LoaderLoader让Webpack能够去处理那些非JavaScript语言的文件，Webpack本身只能理解JavaScript。2.4 Plugins插件(Plugins)可以用于执行范围更广的任务，插件的范围包括从打包和压缩，一直到重新定义环境中的变量等。2.5 Mode模式(Mode)指示Webpack使用相应模式的配置。分为development和production两种模式，下面分别进行简述。development: 开发模式，能让代码本地运行的环境，会将process.env.NODE_ENV的值设为development，同时启用NamedChunksPlugin和NamedModulesPlugin插件；production: 生产模式，能让代码优化运行的环境，会将process.env.NODE_ENV的值设为production，同时启用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitreplaceStringsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin和UglifyJsPlugin插件。3. Wbepack配置3.1 webpack.config.js文件webpack.config.js是webpack的配置文件，用来指示webpack工作，运行webpack指令时，会加载里面的配置，所有构建工具都是基于nodejs平台运行的，默认采用commonjs模块化。webpack.config.js基础配置如图3-1所示。图3-1 webpack.config.js基础配置3.2 devServer配置开发服务器(devServer)用来实现自动化(自动编译、自动打开浏览器、自动刷新浏览器)，只会在内存中编译打包，不会有任何文件输出，本地安装webpack-dev-server后，通过npx webpack-dev-server命令启动devServer，核心代码如图3-2所示。图3-2 devServer配置核心代码3.3 打包html/样式/图片/其它资源打包不同的资源会使用不同的loader和插件，打包html/样式/图片/其它资源的流程如下所述。3.3.1 打包html资源1.下载html-webpack-plugin插件；2.引入html-webpack-plugin插件；3.使用html-webpack-plugin插件，并进行相应配置。3.3.2 打包样式资源不同的样式文件需要配置不同的loader1.下载loader；2.配置loader，css样式文件使用css-loader和style-loader，less文件使用less-loader、css-loader和style-loader。其中css-loader的作用是将css文件变成commonjs模块加载到js文件中，style-loader的作用是创建style标签，将js中的样式资源插入进去，添加到head中生效。3.3.3 打包图片资源1.下载url-loader，file-loader2.配置loader3.3.4 打包其它资源1.下载file-loader2. 配置loader，配置该loader作用于不为html/css/less/js的其他文件3.4 提取css成单独文件/css兼容性处理/压缩css3.4.1 提取css成单独文件样式文件打包后会默认和js文件一起输出，可以通过插件将打包后的css文件单独输出，流程如下所述。1.下载mini-css-extract-plugin插件2.引用该插件3.配置3.4.2 css兼容性处理1.下载postcss-loader和postcss-preset-env2.在package.json中browsetslist属性中分别对开发环境和生产环境进行兼容性配置，设置支持样式的浏览器版本3.通过postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式。3.4.3 压缩css1.下载optimize-css-assets-webpack-plugin插件2.引用该插件3.使用该插件3.5 js语法检查eslint/js兼容性处理/js压缩3.5.1 js语法检查eslint1.下载eslint-loader和eslint2.在package.json中的eslintConfig中进行配置3.配置eslint-loader，其中只需检测js文件并要排除第三方库，只检测自己写的源代码，同时可在options配置中设置fix:true，自动修复eslint的错误。3.5.2 js兼容性处理1.下载babel-loader、@babel/core、@babel/preset-env，通过@babel/preset-env做基本的js兼容性处理，然后通过corejs做前面无法实现的兼容性处理，并实现按需加载2. 配置loaderjs兼容性处理核心代码如图3-3所示图3-3 js兼容性处理核心代码3.5.3 js压缩mode设置为production生产环境时会自动压缩js代码。4. webpack性能优化可以从开发环境和生产环境分别对webpack进行性能优化。其中开发环境主要考虑从打包构建速度和代码调试两个方面进行优化，生产环境主要考虑从打包构建速度和代码运行性能这两个方面进行优化。下面简单介绍下开发环境上通过HMR提升构建速度。4.1 HMRHMR(热模块替换)，作用是一个模块发生变化后，只会更新打包这一个模块而不是所有模块，通过在devServer中设置hot:true属性启动HMR功能。其中对于样式文件，可以使用HMR功能，因为style-loader内部实现了；对于js文件，默认不能使用HMR功能，解决方法：修改入口文件js代码，添加支持HMR功能的代码，另外HMR只能处理非入口js文件的其他文件，对入口文件并不能生效，因为一旦入口文件更新，入口文件引入的其他文件一定会被重新加载；对于html文件，默认不能使用HMR功能，同时会导致html文件不能热更新，解决方法：修改entry入口文件，将html文件引入，只能解决html文件不能热更新的问题。js文件支持HMR功能的核心代码如图4-1所示。图4-1 js文件支持HMR功能核心代码4.2 HMR效果在入口index.js文件中引入print.js文件，运行npx webpack-devserver后，页面如图4-2所示。4-2 初始页面修改print.js文件后，只会重新加载print.js文件，而不会重新加载index.js文件，HMR效果如图4-3所示。4-3 HMR效果图

1. 摘要Webpack是一种前端资源构建工具，一个静态模块打包器。在Webpack看来，前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理，当Webpack处理应用程序时，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。Webpack打包流程图如图1-1所示。图1-1 Webpack打包流程图2. Webpack五个核心概念2.1 Entry入口(Entry)指示Webpack以哪个文件作为入口起点分析构建内部依赖图并进行打包。2.2 Output输出(Output)指示Webpack打包后的资源bundles输出到哪里去，以及如何命名。2.3 LoaderLoader让Webpack能够去处理那些非JavaScript语言的文件，Webpack本身只能理解JavaScript。2.4 Plugins插件(Plugins)可以用于执行范围更广的任务，插件的范围包括从打包和压缩，一直到重新定义环境中的变量等。2.5 Mode模式(Mode)指示Webpack使用相应模式的配置。分为development和production两种模式，下面分别进行简述。development: 开发模式，能让代码本地运行的环境，会将process.env.NODE_ENV的值设为development，同时启用NamedChunksPlugin和NamedModulesPlugin插件；production: 生产模式，能让代码优化运行的环境，会将process.env.NODE_ENV的值设为production，同时启用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitOnErrorsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin和UglifyJsPlugin插件。3. Wbepack配置3.1 webpack.config.js文件webpack.config.js是webpack的配置文件，用来指示webpack工作，运行webpack指令时，会加载里面的配置，所有构建工具都是基于nodejs平台运行的，默认采用commonjs模块化。webpack.config.js基础配置如图3-1所示。图3-1 webpack.config.js基础配置3.2 devServer配置开发服务器(devServer)用来实现自动化(自动编译、自动打开浏览器、自动刷新浏览器)，只会在内存中编译打包，不会有任何文件输出，本地安装webpack-dev-server后，通过npx webpack-dev-server命令启动devServer，核心代码如图3-2所示。图3-2 devServer配置核心代码3.3 打包html/样式/图片/其它资源打包不同的资源会使用不同的loader和插件，打包html/样式/图片/其它资源的流程如下所述。3.3.1 打包html资源1.下载html-webpack-plugin插件；2.引入html-webpack-plugin插件；3.使用html-webpack-plugin插件，并进行相应配置。3.3.2 打包样式资源不同的样式文件需要配置不同的loader1.下载loader；2.配置loader，css样式文件使用css-loader和style-loader，less文件使用less-loader、css-loader和style-loader。其中css-loader的作用是将css文件变成commonjs模块加载到js文件中，style-loader的作用是创建style标签，将js中的样式资源插入进去，添加到head中生效。3.3.3 打包图片资源1.下载url-loader，file-loader2.配置loader3.3.4 打包其它资源1.下载file-loader2. 配置loader，配置该loader作用于不为html/css/less/js的其他文件3.4 提取css成单独文件/css兼容性处理/压缩css3.4.1  提取css成单独文件样式文件打包后会默认和js文件一起输出，可以通过插件将打包后的css文件单独输出，流程如下所述。1.下载mini-css-extract-plugin插件2.引用该插件3.配置3.4.2 css兼容性处理1.下载postcss-loader和postcss-preset-env2.在package.json中browsetslist属性中分别对开发环境和生产环境进行兼容性配置，设置支持样式的浏览器版本3.通过postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式。3.4.3 压缩css1.下载optimize-css-assets-webpack-plugin插件2.引用该插件3.使用该插件3.5 js语法检查eslint/js兼容性处理/js压缩3.5.1 js语法检查eslint1.下载eslint-loader和eslint2.在package.json中的eslintConfig中进行配置3.配置eslint-loader，其中只需检测js文件并要排除第三方库，只检测自己写的源代码，同时可在options配置中设置fix:true，自动修复eslint的错误。3.5.2 js兼容性处理    1.下载babel-loader、@babel/core、@babel/preset-env，通过@babel/preset-env做基本的js兼容性处理，然后通过corejs做前面无法实现的兼容性处理，并实现按需加载    2. 配置loaderjs兼容性处理核心代码如图3-3所示图3-3 js兼容性处理核心代码3.5.3 js压缩mode设置为production生产环境时会自动压缩js代码。4. webpack性能优化可以从开发环境和生产环境分别对webpack进行性能优化。其中开发环境主要考虑从打包构建速度和代码调试两个方面进行优化，生产环境主要考虑从打包构建速度和代码运行性能这两个方面进行优化。下面简单介绍下开发环境上通过HMR提升构建速度。4.1 HMR    HMR(热模块替换)，作用是一个模块发生变化后，只会更新打包这一个模块而不是所有模块，通过在devServer中设置hot:true属性启动HMR功能。其中对于样式文件，可以使用HMR功能，因为style-loader内部实现了；对于js文件，默认不能使用HMR功能，解决方法：修改入口文件js代码，添加支持HMR功能的代码，另外HMR只能处理非入口js文件的其他文件，对入口文件并不能生效，因为一旦入口文件更新，入口文件引入的其他文件一定会被重新加载；对于html文件，默认不能使用HMR功能，同时会导致html文件不能热更新，解决方法：修改entry入口文件，将html文件引入，只能解决html文件不能热更新的问题。js文件支持HMR功能的核心代码如图4-1所示。图4-1 js文件支持HMR功能核心代码4.2  HMR效果在入口index.js文件中引入print.js文件，运行npx webpack-devserver后，页面如图4-2所示。4-2 初始页面修改print.js文件后，只会重新加载print.js文件，而不会重新加载index.js文件，HMR效果如图4-3所示。4-3 HMR效果图

我想自己提供适配方案，需要在哪里进行webpack的配置呢？还有，不打算模板提供一下配置吗？

前言 webpack 前端工程中扮演的角色越来越重要，它也是前端工程化很重要的一环。本文将和大家一起按照项目流程学习使用 wwbpack，由浅入深的学习，妈妈再也不用担心我不会使用 webpack，哪里不会看哪里。 工程化 这里是一个项目工程化、规范化的设置，建议初次使用 webpack 的同学最后在看这里。现在 vue、react 等脚手架都会自动将开发环境使用的 webpack 的配置文件和生产环境的配置文件分开，将压缩代码、添加 hash 控制版本等操作放在项目上线时运行，这样避免了在开发阶段打包时间过长的问题。比如像这样，把两个环境的配置文件分开。 下面来看下两个配置文件的内容（小编是用的 typescript 开发 react，内容请忽略） 开发环境： 生产环境： 可以看到，开发环境增加了几个插件，这样做的好处就是更加工程化、规范化，降低开发环境的打包时间，代码维护性也更高。 [indent]分开写配置文件就要涉及到使用命令执行不同的配置文件，我们可以使用 npm 的脚本命令，我们可以在 package.json 中找到 scripts，添加如下命令"build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"[/indent] 给大家解释下这个命令的意思 [*]NODE_ENV=production 就是将运行环境设置成生产环境 [*]webpack --config 就是运行 webpack 的配置文件 [*]./webpack.production.config.js 是要运行的指定位置的文件，这个路径是相对根目录来说的 [*]--progress 是编译过程显示进程百分比的 如果你不追求规范化和工程化，我们就写一个配置文件就好，这里没有硬性要求。下面我们来讲 webpack 的具体配置。 开始 在我们对于 webpack 不是特别熟练的时候，我们可能不会写全配置文件，往往是用到什么再去添加，下面我们就按照这个步骤彻底学会使用 webpack。 loader 这就是我们最初一个骨架，下面我们再添加一些配置，比如你使用的是 react，那么你就需要添加 react 的相关 loader，这里以 typescript 编写的 react 为例。 css/css 预处理语言(less、sass、stylus)webpack 是将一个个文件分拆成一个个模块（module）来进行编译打包的，我们所有的处理文件内容的东西都要放在 module 里，rules 即规则。rules 里面的两个 loader 都是编译 .tsx 文件及处理错误信息的。 [indent]在你写好了组件之后，你需要开始编写样式，但无论是 css 还是使用 less、sass 等预处理语言，webpack 都是无法直接处理的，我们安装并使用相应的 loader。下面以 less 和 css 为例。[/indent] webpack 会按照从右到左的顺序执行 loader，我们新解析 less，之后进行 css 的打包编译。如果你不适用 less 等预处理语言，安装 css-loader 和 style-loader 即可。 [*]style-loader 将 css **到页面的 style 标签 [*]css-loader 是将 @import 和 url() 转换成 import/require()的 [*]less-loader 是将less文件编译成css postcss 解决 css 兼容问题写到这里我们会突然想到一个点，就是css样式的兼容性问题，靠人工去写的话，我们必须使用postcss来解决这个问题。[indent]postcss是目前css兼容性的解决方案，会自动帮我们加入前缀，以使css样式在不同的浏览器能兼容，这里安装使用postcss-loader[/indent]{ test: /\.(less|css)?$/, loader: ["style-loader", "css-loader", "less-loader", "postcss-loader"]} postcss-loader 要写在最后（其实只要放在 css-loader 之后就可以），写到这你以为就可以了吗？只能说 too young，postcss 解决兼容性问题主要靠的其实是它的插件 autoprefixer，我们还需要在根目录写一个 postcss.config.js 的配置文件，如下 写到这，我们就不用再担心 css 兼容性问题了，就想使用 babel 文件一样，这个文件会自动解析，我们不需要管它。 svg 图片的使用我们在开发时，往往会遇到一些图标图片在不同情况下会失真，以及资源过多，我们需要减小图标类图片的大小，这时我们就需要引入 svg解决上面的问题。 [indent]我们打开下载的素材文件夹，发现里面有一些 .woff、.svg、.eot 的文件，我们要想使用 svg 的图标还必须依赖这些文件，这时 webpack 不支持这些文件，我们需要引入新的 loader[/indent] 下面我们就能愉快的使用 svg 图标了，不存在失真的情况，同时会很小 webpack-dev-server写到这，我们可能不断的打包 webpack 了，太麻烦了，于是乎 webpack-dev-server 应运而生。它是 webpack 提供的服务器，我们使用 npm i webpack-dev-server --save-dev 来安装。我们其实在命令行中敲击 webpack-dev-server --open 就可以开启，默认是 localhost:8080开启，现在我们不需要在重复使用 webpack 命令打包，安装。 [indent]值得注意的是，webpack-dev-server 打包的文件会存在内存中，所以在 index.html 中引入文件的时候就要如下，这里是默认输出文件是bundle.js[/indent] 今天我们不重点讲 webpack-dev-server。可能我们在开发阶段只用到了这几个功能，下面我们来讲一下项目上线的准备。 生产环境 优化 压缩js代码 我们打包完成的项目往往比较大，包含很多空格，占用了很大空间，这时我们要通过压缩 js 来减小文件体积。webpack 自带了 UglifyJsPlugin 插件来压缩 js 代码，使用如下： 我们的插件统一放在 export.modules = {}的plugins 里面，它是一个数组，使用插件时 new 一个实例即可。这里我们使用到 webpack 实例，所以要在配置文件头部引入 webpack，即 var webpack = require('webpack'); 拆分文件我们在使用的 js 库如 vue 或者 react 等的时候，webpack 会将它们一起打包，react 和 react-dom 文件就好几百KB，全部打包成一个文件，可想而知，这个文件会很大，用户在首次打开时就往往会出现白屏等待时间过长的问题，这时，我们就需要将这类文件抽离出来。 这里我们会用到 externals，它和 plugins 是平级。左侧 key 表示依赖，右侧 value 表示文件中使用的对象。比如在 react 开发中，我们常常会这样在文件头部写 import React from 'react'，这里大家可以和上面对号入座下。 [indent]这里我们就需要对这个文件进行单独的引入使用了，在 index.html 中添加如下代码[/indent] 写到这，我们就已经将文件拆分了。不过，我们在项目上线的时候不可能会带有 node_modules，所以我们就需要使用一个 copy 插件将 react 和 react-dom 文件复制出来 这样我们的 index.html 文件中就要写成下面这种形式 拆分css我们也可以将 css 文件单独拆分出来，这样的好处就是打包的 css 文件我们可以放到 cdn 上，然后缓存到浏览器客户端中。这样就尽可能的减小文件的体积，以及不必要的资源重新加载，避免浪费带宽。 [indent]我们要先安装插件[/indent]npm install extract-text-webpack-plugin --save-dev[indent]配置文件添加对应配置[/indent]var ExtractTextPlugin = require("extract-text-webpack-plugin");[indent]plugins 里面添加插件[/indent]new ExtractTextPlugin("styles.css") 下面是具体的使用 webpack 会将所有引用到的 css 文件打包，最终生成 ./css/[name].min.css 文件。 图片处理这里对图片进行 base64 进行转码同样是减小资源的体积[indent]安装 url-loader[/indent]npm install url-loader --save-dev[indent]在 modules 的 rules 里面添加[/indent] limit 设置一个阈值，小于这个值得图片就会自动启用 base64 编码的图片，大于这个值的图片会打包到 name 这参数对应的路径，图片名称就会包括8位 md5 编码，name 对应文件本来名称，ext 对应扩展名。 浏览器缓存资源我们的后台会给资源设置 Cache-Control: max-age=秒替代，来对资源进行缓存时间的设置，这使得我们在刷新页面之后会去缓存中加载资源，但是存在一个问题，就是，一旦我们更新版本之后，客户没有去清除缓存，同时缓存还没有过期的情况下，就无法加载到最新的资源。这时我们就需要 hash 值来进行版本控制。 [indent]我们通常这样做[/indent] 给输出文件加上[hash]来添加hash值，这样就可以做到用户加载html里会去加载对应hash值得打包文件，比如下面这样 打包出来的 js 文件是这样 这样就能解决这个问题了。 还有最后一项我们不可能每次都去手动复制一个 index.htm 到打包好的 dist 文件中，我们会使用一款插件 html-webpack-plugin，它可以自动添加html文件到 dist 文件中，同时它会自动添加 js 文件，并带有 hash 值。[indent]引入插件[/indent]var HtmlWebpackPlugin = require('html-webpack-plugin');[indent]使用插件[/indent] 这里给大家解释下，template 是模板，我们在很多情况下，生产环境和开发环境不同，导致 index.html 引入的资源路径不同，这时为了避免改来改去，我们可以创建一个模板，它指定编译时我们 copy 的 index.html 文件。filename是最终生成的文件名。[indent]模板文件如下[/indent] [indent]生成的 index.html 文件如下 [/indent] 下面是小编打包编译的 dist 文件夹内容 下面是生产环境的配置文件（部分）var CopyWebpackPlugin = require("copy-webpack-plugin"); var HtmlWebpackPlugin = require('html-webpack-plugin'); var webpack = require("webpack"); var path = require('path'); var ExtractTextPlugin =require("extract-text-webpack-plugin"); module.exports = { entry:"./src/index.tsx", output: { path: __dirname + "/dist", filename:"js/"+"[name][hash].js" }, resolve: { extensions:[".ts", ".tsx", ".js", ".json"] }, module: { rules: [ { test:/\.tsx?$/, loader: "awesome-typescript-loader" }, { enforce: "pre", test:/\.js$/, loader: "source-map-loader" }, { test:/\.(less|css)?$/, loader: ["style-loader", "css-loader","less-loader", "postcss-loader"] }, { test:/\.(woff|svg|eot|ttf)?$/, loader: "url-loader" } ] }, externals: { "react": "React", "react-dom": "ReactDOM" }, plugins: [ newCopyWebpackPlugin([ { from:"node_modules/react/dist/react.js", to: "js/react.min.js"}, { from:"node_modules/react-dom/dist/react-dom.js", to:"js/react-dom.min.js" }, { from:"index.html", to: "index.html" }, { from:"public/favicon.ico", to: "favicon.ico" } ]), newHtmlWebpackPlugin({ template: path.join(__dirname,'src/index.tmpl.html'), filename:'index.html' }), newwebpack.optimize.UglifyJsPlugin({ compress:{ warnings: false } }) ] }; 学好 webpack，这就是一名现代前端开发工程师基本的自我修养。 — END — [color=rgba(0, 0, 0, 0.8)]免责声明：本文及图片来源于网络，仅供学习、交流使用，不具有任何商业用途，版权归原作者所有，如有问题请及时联系我们以作处理。本声明未涉及的问题参见国家有关法律法规，当本声明与国家法律法规冲突时，以国家法律法规为准。 长按二维码关注“THINK” 其他精彩文章：ajax 跨域，这是最全的解决方案！