webpack优化打包（Webpack怎么优化配置文件）

本文目录

• Webpack怎么优化配置文件
• webpack打包之后的文件过大如何解决
• 在vue中如何实现webpack打包优化
• 如何使用webpack模块化管理与打包工具
• 如何使用webpack优化资源方法技巧
• webpack如何打包js
• 怎么优化webpack配置
• webpack打包优化怎么做（提升webpack打包速度）
• webpack如何打包js与css文件

Webpack怎么优化配置文件

这次给大家带来Webpack怎么优化配置文件，Webpack优化配置文件的注意事项有哪些，下面就是实战案例，一起来看一下。
Webpack 启动后会从配置的 Entry 出发，解析出文件中的导入语句，再递归的解析。
在遇到导入语句时 Webpack 会做两件事情：
1.根据导入语句去寻找对应的要导入的文件。例如 require(’react’) 导入语句对应的文件是 ./node_modules/react/react.js ， require(’./util’) 对应的文件是 ./util.js 。
2.根据找到的要导入文件的后缀，使用配置中的 Loader 去处理文件。例如使用 ES6 开发的 JavaScript 文件需要使用 babel-loader 去处理。
以上两件事情虽然对于处理一个文件非常快，但是当项目大了以后文件量会变的非常多，这时候构建速度慢的问题就会暴露出来。
虽然以上两件事情无法避免，但需要尽量减少以上两件事情的发生，以提高速度。
接下来一一介绍可以优化它们的途径。
优化 loader 配置
由于 Loader 对文件的转换操作很耗时，需要让尽可能少的文件被 Loader 处理。
在 2-3 Module 中介绍过在使用 Loader 时可以通过 test 、 include 、 exclude 三个配置项来命中 Loader 要应用规则的文件。
为了尽可能少的让文件被 Loader 处理，可以通过 include 去命中只有哪些文件需要被处理。
以采用 ES6 的项目为例，在配置 babel-loader 时，可以这样：
module.exports = {
module: {
rules: [
{
// 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能
test: /\.js$/,
// babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启
use: ,
// 只对项目根目录下的 src 目录中的文件采用 babel-loader
include: path.resolve(dirname, ’src’),
},
]
},
};
你可以适当的调整项目的目录结构，以方便在配置 Loader 时通过 include 去缩小命中范围。
优化 resolve.modules 配置
在 2-4 Resolve 中介绍过 resolve.modules 用于配置 Webpack 去哪些目录下寻找第三方模块。
resolve.modules 的默认值是 ，含义是先去当前目录下的 ./node_modules 目录下去找想找的模块，如果没找到就去上一级目录 ../node_modules 中找，再没有就去 ../../node_modules 中找，以此类推，这和 Node.js 的模块寻找机制很相似。
当安装的第三方模块都放在项目根目录下的 ./node_modules 目录下时，没有必要按照默认的方式去一层层的寻找，可以指明存放第三方模块的绝对路径，以减少寻找，配置如下：
module.exports = {
resolve: {
// 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
// 其中 dirname 表示当前工作目录，也就是项目根目录
modules:
},
};
优化 resolve.mainFields 配置
在 2-4 Resolve 中介绍过 resolve.mainFields 用于配置第三方模块使用哪个入口文件。
安装的第三方模块中都会有一个 package.json 文件用于描述这个模块的属性，其中有些字段用于描述入口文件在哪里， resolve.mainFields 用于配置采用哪个字段作为入口文件的描述。
可以存在多个字段描述入口文件的原因是因为有些模块可以同时用在多个环境中，准对不同的运行环境需要使用不同的代码。
以 isomorphic-fetch 为例，它是 fetch API 的一个实现，但可同时用于浏览器和 Node.js 环境。
它的 package.json 中就有2个入口文件描述字段：
{
"browser": "fetch-npm-browserify.js",
"main": "fetch-npm-node.js"
}
***隐藏网址***
resolve.mainFields 的默认值和当前的 target 配置有关系，对应关系如下：
当 target 为 web 或者 webworker 时，值是
当 target 为其它情况时，值是
以 target 等于 web 为例，Webpack 会先采用第三方模块中的 browser 字段去寻找模块的入口文件，如果不存在就采用 module 字段，以此类推。
为了减少搜索步骤，在你明确第三方模块的入口文件描述字段时，你可以把它设置的尽量少。
由于大多数第三方模块都采用 main 字段去描述入口文件的位置，可以这样配置 Webpack：
module.exports = {
resolve: {
// 只采用 main 字段作为入口文件描述字段，以减少搜索步骤
mainFields: ,
},
};
使用本方法优化时，你需要考虑到所有运行时依赖的第三方模块的入口文件描述字段，就算有一个模块搞错了都可能会造成构建出的代码无法正常运行。
优化 resolve.alias 配置
在 2-4 Resolve 中介绍过 resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。
在实战项目中经常会依赖一些庞大的第三方模块，以 React 库为例，安装到 node_modules 目录下的 React 库的目录结构如下：
├── dist
│ ├── react.js
│ └── react.min.js
├── lib
│ ... 还有几十个文件被忽略
│ ├── LinkedStateMixin.js
│ ├── createClass.js
│ └── React.js
├── package.json
└── react.js
可以看到发布出去的 React 库中包含两套代码：
一套是采用 CommonJS 规范的模块化代码，这些文件都放在 lib 目录下，以 package.json 中指定的入口文件 react.js 为模块的入口。
一套是把 React 所有相关的代码打包好的完整代码放到一个单独的文件中，这些代码没有采用模块化可以直接执行。其中 dist/react.js 是用于开发环境，里面包含检查和警告的代码。 dist/react.min.js 是用于线上环境，被最小化了。
默认情况下 Webpack 会从入口文件 ./node_modules/react/react.js 开始递归的解析和处理依赖的几十个文件，这会时一个耗时的操作。
通过配置 resolve.alias 可以让 Webpack 在处理 React 库时，直接使用单独完整的 react.min.js 文件，从而跳过耗时的递归解析操作。
相关 Webpack 配置如下：
module.exports = {
resolve: {
// 使用 alias 把导入 react 的语句换成直接使用单独完整的 react.min.js 文件，
// 减少耗时的递归解析操作
alias: {
’react’: path.resolve(dirname, ’./node_modules/react/dist/react.min.js’),
}
},
};
除了 React 库外，大多数库发布到 Npm 仓库中时都会包含打包好的完整文件，对于这些库你也可以对它们配置 alias。
但是对于有些库使用本优化方法后会影响到后面要讲的 使用 Tree-Shaking 去除无效代码 的优化，因为打包好的完整文件中有部分代码你的项目可能永远用不上。
一般对整体性比较强的库采用本方法优化，因为完整文件中的代码是一个整体，每一行都是不可或缺的。
但是对于一些工具类的库，例如 lodash ，你的项目可能只用到了其中几个工具函数，你就不能使用本方法去优化，因为这会导致你的输出代码中包含很多永远不会执行的代码。
优化 resolve.extensions 配置
在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试询问文件是否存在。
在 2-4 Resolve 中介绍过 resolve.extensions 用于配置在尝试过程中用到的后缀列表，默认是：
extensions:
也就是说当遇到 require(’./data’) 这样的导入语句时，Webpack 会先去寻找 ./data.js 文件，如果该文件不存在就去寻找 ./data.json 文件，如果还是找不到就报错。
如果这个列表越长，或者正确的后缀在越后面，就会造成尝试的次数越多，所以 resolve.extensions 的配置也会影响到构建的性能。
在配置 resolve.extensions 时你需要遵守以下几点，以做到尽可能的优化构建性能：
后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀尝试列表中。
频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找过程。在源码中写导入语句时，要尽可能的带上后缀，从而可以避免寻找过程。例如在你确定的情况下把 require(’./data’) 写成 require(’./data.json’) 。
相关 Webpack 配置如下：
module.exports = {
resolve: {
// 尽可能的减少后缀尝试的可能性
extensions: ,
},
};
优化 module.noParse 配置
在 2-3 Module 中介绍过 module.noParse 配置项可以让 Webpack 忽略对部分没采用模块化的文件的递归解析处理，这样做的好处是能提高构建性能。
原因是一些库，例如 jQuery 、ChartJS， 它们庞大又没有采用模块化标准，让 Webpack 去解析这些文件耗时又没有意义。
在上面的 优化 resolve.alias 配置 中讲到单独完整的 react.min.js 文件就没有采用模块化，让我们来通过配置 module.noParse 忽略对 react.min.js 文件的递归解析处理，
相关 Webpack 配置如下：
const path = require(’path’);
module.exports = {
module: {
// 独完整的 `react.min.js` 文件就没有采用模块化，忽略对 `react.min.js` 文件的递归解析处理
noParse: ,
},
};
注意被忽略掉的文件里不应该包含 import 、 require 、 define 等模块化语句，不然会导致构建出的代码中包含无法在浏览器环境下执行的模块化语句。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
AngularJS实现猜数字小游戏
Angular实现可添加删除与计算总金额效果插件

webpack打包之后的文件过大如何解决

本文主要和大家介绍了webpack打包之后的文件过大的解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
以前一直使用 create-react-app 这个脚手架进行 react 开发，后面因为一些自定义的配置，转而使用 webpack 搭建一套自己的脚手架。但是在使用 webpack 打包之后发现，纳尼？怎么文件这么大？？？ 于是研究了一下如何处理 webpack 打包之后文件太大的情况，简单记录下来。
首先配置全局变量
首先，通过指定环境，告诉 webpack 我们当前处于 production 环境中，要按照 production 的方式去打包。
优化 devtool 中的 source-map .
***隐藏网址***
剥离css文件，单独打包
安装 webpack 插件 extract-text-webpack-plugin 。 npm install extract-text-webpack-plugin --save-dev 。 使用方法：
这里使用了 contenthash ， webpack 会根据内容去生成 hash 值。
使用 UglifyJSPlugin 压缩。
通过 UglifyJSPlugin 可以压缩我们的 *.js 文件。 安装方法: npm install uglifyjs-webpack-plugin --save-dev 。 用法： UglifyJSPlugin详细用法
提取公共依赖
使用 CommonsChunkPlugin 插件，将多个 js 文件进行提取，建立一个独立的文件。这个文件包含一些共用模块，浏这样览器只在刚开始的时候加载一次，便缓存起来供后续使用。而不用每次访问一个新界面时，再去加载一个更大的文件。
开启gzip压缩
我们使用 compression-webpack-plugin 插件进行压缩。 安装： npm install compression-webpack-plugin --save-dev 。 compression-webpack-plugin 详细用法 使用：
压缩结果：
开启html压缩，自动添加上面生成的静态资源
添加插件 html-webpack-plugin
安装： npm install html-webpack-plugin --save-dev 用法：

在vue中如何实现webpack打包优化

webpack是react项目标配的打包工具，和NPM搭配起来使用管理模块实在非常方便。这篇文章主要介绍了webpack打包优化（VUE Project）,需要的朋友可以参考下
临近春节，公司很多同事都提前回家过年，剩余人员根据禅道去修改bug，当bug修正完毕以后，我们需要重新打包给运维，上测试服给测试同事提测，但是由于项目本体比较庞大，所以打包时间太过漫长（二十五分钟以上:sob:），所以有了打包优化的想法（其实想法早就有了，但是因为平时工作计划比较充实，所以一直没有去完成这个工作），这次正好有时间，所以去重新考虑了这个问题！
webpack是react项目标配的打包工具，和NPM搭配起来使用管理模块实在非常方便。
??webapck 把所有的静态资源都看做是一个 module，通过 webpack，将这些 module 组成到一个 bundle 中去，从而实现在页面上引入一个 bundle.js，来实现所有静态资源的加载。
话不多说，直接开始正文吧
先给大家看一下项目的目录结构：

就是正常的项目结构，简单说一下吧：
build文件夹包含的是一些打包配置的一下东西
config文件夹是项目的基础配置
dist是打包之后的文件
node_modules是项目的依赖包
src文件夹里面是项目的源码
static文件夹里面放的是一些项目使用的静态资源
index.html是项目的首页
package.json文件是项目的配置json
yarn.lock是使用yarn锁定项目用的依赖
优化思路
项目打包时间长，原因无外乎就是项目整体比较庞大、依赖复杂、组件之前拆分不够合理。
对于这三个问题呢，我们可以针对下面这几个方面去做一下处理：
对项目进行路由屏蔽，只打包自己需要打包的部分（我司就是好几个项目合并在了一起，至于原因则是 需求类似，所以放在一起比较省事 -_-||| 开发过程中是省了不少事，但是现在一样要还的！！！！）
依赖关系复杂，这里说的是项目中的依赖模块比较多，像我们现在这个项目，光算依赖包的话就有40+，另外一个重要原因就是组件之间存在相同引用的依赖。解决思路是把项目中重用的依赖抽离出来进行单独打包。
组件在写的过程中，需要考虑好这个组件的使用方向，以及实现功能，不能混为一谈。
实际操作
有了整体的思路，那么开搞就可以啦 去webpack文档去看了一下有一个DllPlugin，这个插件就是帮助我们解决问题的关键，下面是我webpack.dll.config的代码：
var path = require("path");
var webpack = require("webpack");
function resolve (dir) {
return path.join(__dirname, ’..’, dir)
}
module.exports = {
// 你想要打包的模块的数组
entry: {
vendor: [’vue’, ’lodash’, ’vuex’, ’axios’, ’vue-router’, ’iview’, ’element-ui’,
’echarts’,’xlsx’,’jquery’,’vue-fullcalendar’,’vue-cookie’,’handsontable’]
},
output: {
path: path.join(__dirname, ’../dist/vendor-dll-js’), // 打包后文件输出的位置
filename: ’.dll.js’,
library: ’_library’
// vendor.dll.js中暴露出的全局变量名。
// 主要是给DllPlugin中的name使用，
// 故这里需要和webpack.DllPlugin中的`name: ’_library’,`保持一致。
},
resolve: {
extensions: ,
alias: {
’vue$’: ’vue/dist/vue.esm.js’,
’@’: resolve(’src’),
}
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, ’.’, ’-manifest.json’),
name: ’_library’,
context: __dirname
}),
// 压缩打包的文件，与该文章主线无关
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};我们需要将项目中具有重用性的包抽离出来，放在vendor数组里面，然后在下面output里面定义一下打包输出的文件路径，然后在resolve里面配置解析参数，最后定义使用的DllPlugin插件，UglifyJsPlugin是压缩js的插件
Dllplugin里的path，会输出一个vendor-manifest.json，这是用来做关联id的，打包的时候不会打包进去，所以不用放到static里 然后运行一下 webpack -p --progress --config build/webpack.dll.conf.js
成功以后，static下会有dll.vendor.js，根目录下会有vendor.manifest.json 各自打开看一下，就会看到依赖库的源码和匹配id
ok，到这里，抽离依赖库的事情就完成了，那么接下来问题就是怎么引用呢，怎么在dev和build跑呢？
这里补了一点dll和commonsChunk概念上的区别，commonsChunk之所以慢和大，是因为每次run的时候，都会去做一次打包，而实际上我们不会一直去更新我们引用的依赖库，所以dll的做法就等于是，事先先打包好依赖库，然后只对每次都修改的js做打包。
继续上面的步骤，我们需要根据生成的json文件去修改webpack.base.config文件：
const manifest = require(’../vendor-manifest.json’)
......
plugins: [
new webpack.DllReferencePlugin({
manifest
})
]然后打开index.html，在底部加上 《script src="./static/dll.vendor.js"》《/script》 ；
执行一下 npm run build ,一起正常的话，表示你的操作是正确的。
升级处理
至此优化的问题基本已经解决了，但是在处理过程中需要进行复制粘贴，还要对index.html文件进行操作，如果是对于项目不熟悉的人来进行开发项目的话，就会出现一些小的问题，所以我决定继续往下研究一下：
思路还是上面的思路，我们下面需要进行的操作呢就是对与之前的处理进行优化，通过配置文件，和命令去实现我们想要的效果
首先我们将上面 webpack.dll.config 文件里面的entry配置项拿出来，在config文件夹下新建一个dll.js
module.exports = {
entry: {
// 这里的依赖顺序必须是：对象从上往下依赖，数组从右到左依赖（如果互不依赖的可以忽略顺序）
ui: ,
tool: ,
vue: ,
xlsx: ,
echarts: ,
other: ,
},
outFile: ’../static/dll’
};这里面其实就是我们一开始写的entry的配置项，根据这个js去打包的文件有一个顺序，就是我总结的这个：
这里的依赖顺序必须是：对象从上往下依赖，数组从右到左依赖（如果互不依赖的可以忽略顺序）
如果不按照这个顺序去写的话，会出现依赖错误的问题！！！
然后在output里面再进行一下配置：
output: {
path: path.join(__dirname, dllConfig.outFile), // 打包后文件输出的位置
filename: ’.js’,
library: ’_library’
// 主要是给DllPlugin中的name使用，
// 故这里需要和webpack.DllPlugin中的`name: ’_library’,`保持一致。
},这样在执行 webpack -p --progress --config build/webpack.dll.conf.js 指令的时候会生成如下：

是不是看到文件后面的hash就一脸懵逼，这怎么办，我们没有办法去进行复制粘贴了！！（我们的目的不就是不进行复制粘贴吗 正经脸-_-）
要实现命令操作之后不进行复制粘贴操作就需要使用webpack的HtmlWebpackPlugin插件
在plugins里面配置一下HtmlWebpackPlugin
new HtmlWebpackPlugin({
filename: path.join(__dirname, ’../’, config.dev.index),
template: ’index.ejs’,
inject: false
}),然后在根目录添加一个index.ejs模版（ejsGitHub地址 ）， index.ejs中代码如下:
《body》
《p id="app"》《/p》
《!-- dll files will be auto injected --》
《% for (var chunk in htmlWebpackPlugin.files.chunks) { %》《script type="text/javascript" src="/《%= htmlWebpackPlugin.files.chunks.entry %》"》《/script》
《% } %》
《!-- built files will be auto injected --》
《/body》最后需要在config文件夹下的index.js进行一下修改： 在dev中添加： index: ’index.html’,
项目在执行dev指令或者build指令之前需要先执行： webpack -p --progress --config build/webpack.dll.conf.js 在dll指令结束后 执行其他操作就可以完美的玩耍了:blush:
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
通过vue.js使用axios实现下载功能（详细教程）
通过在Vue中使用vue2-highcharts如何实现曲线数据展示的方法？
通过在Vue中使用vue2-highcharts实现top功能（详细教程）

如何使用webpack模块化管理与打包工具

这次给大家带来如何使用webpack模块化管理与打包工具，使用webpack模块化管理与打包工具的注意事项有哪些，下面就是实战案例，一起来看一下。
Webpack简介
webpack是当下最热门的前端资源模块化管理和打包工具。 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际
需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
模块系统的演进《script》标签
《script src="module1.js"》《/script》
《script src="module2.js"》《/script》
《script src="libraryA.js"》《/script》
《script src="module3.js"》《/script》这是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中，
不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口，典型的例子如 YUI 库。
这种原始的加载方式暴露了一些显而易见的弊端：
全局作用域下容易造成变量冲突
文件只能按照 《script》 的书写顺序进行加载
开发人员必须主观解决模块和代码库的依赖关系
在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪
CommonJS规范
CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。
CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行。该规范的主要内容是，模块必须通过 module.exports 导出对外的变量 或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。
一个直观的例子
// moduleA.js
module.exports = function( value ){
return value * 2;
}
// moduleB.js
var multiplyBy2 = require(’./moduleA’);
var result = multiplyBy2(4);AMD规范
AMD（异步模块定义）是为浏览器环境设计的，因为 CommonJS 模块系统是同步加载的，当前浏览器环境还没有准备好同步加载模块的条件。
模块通过 define 函数定义在闭包中，格式如下：
define(id?: String, dependencies?: String, factory: Function|Object);id 是模块的名字，它是可选的参数。
factory 是最后一个参数，它包裹了模块的具体实现，它是一个函数或者对象。如果是函数，那么它的返回值就是模块的输出接口或值。
一些用例
定义一个名为 myModule 的模块，它依赖 jQuery 模块：
define(’myModule’, , function($) {
// $ 是 jquery 模块的输出
$(’body’).text(’hello world’);
}); // 使用 require(, function(myModule) {});注意 ：在 webpack 中，模块名只有局部作用域，在 Require.js 中模块名是全局作用域，可以在全局引用。
定义一个没有 id 值的匿名模块，通常作为应用的启动函数：
define(, function($) {
$(’body’).text(’hello world’);
});AMD 也采用require()语句加载模块，但不同于CommonJS,他要求两个参数
第一个参数，是一个数组，里面的成员就是要加载的模块； 第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：
math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境
目前，主要有两个Javascript库实现了AMD规范： require.js 和 curl.js
require(, function (math) {
math.add(2, 3);
});什么是 Webpack
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
Webpack 的特点
代码拆分
Loader
智能解析
插件系统
快速运行
webpack基本使用
创建项目根目录
初始化
npm init 或 npm init -y全局安装
npm install webpack -g局部安装,在项目目录下安装
npm install webpack --save-dev--save: 将安装的包的信息保存在package中
--dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件
如果使用web开发工具,单独安装
npm install webpack-dev-server --save-dev基本使用
首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：
《!-- index.html --》
《html》
《head》
《meta charset="utf-8"》
《/head》
《body》
《script src="bundle.js"》《/script》
《/body》
《/html》创建entry.js
// entry.js : 在页面中打印出一句话
document.write(’It works.’)然后编译 entry.js并打包到 bundle.js文件中
// 使用npm命令
webpack entry.js bundle.js使用模块
1.创建模块module.js,在内部导出内容
module.exports = ’It works from module.js’2.在entry.js中使用自定义的模块
//entry.js
document.write(’It works.’)
document.write(require(’./module.js’)) // 添加模块加载css模块
1.安装css-loader
npm install css-loader style-loader --save-dev2.创建css文件
//style.css
body { background: yellow; }3.修改 entry.js：
require("!style-loader!css-loader!./style.css") // 载入 style.css
document.write(’It works.’)
document.write(require(’./module.js’))创建配置文件webpack.config.js
1.创建文件
var webpack = require(’webpack’)
module.exports = {
entry: ’./entry.js’,
output: {
path: __dirname,
filename: ’bundle.js’
},
module: {
loaders: [
//同时简化 entry.js 中的 style.css 加载方式：require(’./style.css’)
{test: /\.css$/, loader: ’style-loader!css-loader’}
]
}
}2.修改 entry.js 中的 style.css 加载方式：require(’./style.css’)
3.运行webpack
在命令行页面直接输入webpack
插件使用
1.插件安装
//添加注释的插件
npm install --save-devbannerplugin2.配置文件的书写
var webpack = require(’webpack’)
module.exports = {
entry: ’./entry.js’,
output: {
path: __dirname,
filename: ’bundle.js’
},
module: {
loaders: [
//同时简化 entry.js 中的 style.css 加载方式：require(’./style.css’)
{
test: /\.css$/,
loader: ’style-loader!css-loader’
}
],
plugins: [
//添加注释的插件
new webpack.BannerPlugin(’This file is created by zhaoda’)
]
}
}3.运行webpack
// 可以在bundle.js的头部看到注释信息
/*! This file is created by zhaoda */开发环境
webpack
--progress : 显示编译的进度
--colors ：带颜色显示，美化输出
--watch：开启监视器，不用每次变化后都手动编译
12.4.7.1. webpack-dev-server
开启服务,以监听模式自动运行
1.安装包
npm install webpack-dev-server -g --save-dev2.启动服务
实时监控页面并自动刷新
webpack-dev-server --progress --colors自动编译
1.安装插件
npm install --save-dev html-webpack-plugin2.在配置文件中导入包
var htmlWebpackPlugin = require(’html-webpack-plugin’)3.在配置文件中使用插件
plugins: [
//添加注释的插件
new webpack.BannerPlugin(’This file is created by zhaoda’),
//自动编译
new htmlWebpackPlugin({
title: "index",
filename: ’index.html’, //在内存中生成的网页的名称
template: ’./index.html’ //生成网页名称的依据
})
]4.运行项目
webpack--save-dev相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
调用模式与this绑定
在实战项目中怎样使用jquery layur弹出层

如何使用webpack优化资源方法技巧

在前端应用的优化中，对加载资源的大小控制极其的重要，大多数时候我们能做的是在打包编译的过程对资源进行大小控制、拆分与复用。本文主要介绍了浅谈如何使用 webpack 优化资源，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
前言
本片文章中主要是基于 webpack 打包，以 React、vue 等生态开发的单页面应用来举例说明如何从 webpack 打包的层面去处理资源以及缓存，其中主要我们需要做的是对 webpack 进行配置的优化，同时涉及少量的业务代码的更改。
同时对打包资源的分析可以使用 (webpack-contrib/webpack-bundle-analyzer) 插件，当然可选的分析插件还是很多的，在本文中主要以该插件来举例分析。
TIP: webpack 版本 @3.6.0
一、打包环境与代码压缩
首先我们有一个最基本的 webpack 配置：
// webpack.config.js
const path = require(’path’);
const BundleAnalyzerPlugin = require(’webpack-bundle-analyzer’).BundleAnalyzerPlugin;
const PROJECT_ROOT = path.resolve(__dirname, ’./’);
module.exports = {
entry: {
index: ’./src/index.js’
},
output: {
path: path.resolve(__dirname, ’dist’),
filename: ’.js’
},
module: {
rules: [
{
test: /\.js?$/,
use: ’babel-loader’,
include: PROJECT_ROOT,
exclude: /node_modules/
}
]
},
plugins: [
new BundleAnalyzerPlugin()
],
resolve: {
extensions:
},
};执行打包可以看到一个项目的 js 有 1M 以上：
Hash: e51afc2635f08322670b
Version: webpack 3.6.0
Time: 2769ms
Asset Size Chunks Chunk Names
index.caa7.js 1.3 MB 0 index这时候只需要增加插件 `DefinePlugin` 与 `UglifyJSPlugin` 即可减少不少的体积，在 plugins 中添加：
// webpack.config.js
...
{
...
plugins: [
new BundleAnalyzerPlugin(),
new webpack.DefinePlugin({
’process.env.NODE_ENV’: JSON.stringify(process.env.NODE_ENV || ’production’)
}),
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
output: {
comments: false,
beautify: false,
},
mangle: {
keep_fnames: true
},
compress: {
warnings: false,
drop_console: true
},
}
})
]
...
}可以看到这时候的打包输出：
Hash: 84338998472a6d3c5c25
Version: webpack 3.6.0
Time: 9940ms
Asset Size Chunks Chunk Names
index.89c2.js 346 kB 0 index代码的大小从 1.3M 降到了 346K。
（1）DefinePlugin
DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。如果在开发构建中，而不在发布构建中执行日志记录，则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发和发布构建的规则。
在我们的业务代码和第三方包的代码中很多时候需要判断 `process.env.NODE_ENV` 来做不同处理，而在生产环境中我们显然不需要非 `production` 的处理部分。
在这里我们设置 `process.env.NODE_ENV` 为 `JSON.stringify(’production’)`，也就是表示讲打包环境设置为生产环境。之后配合 `UglifyJSPlugin` 插件就可以在给生产环境打包的时候去除部分的冗余代码。
（2）UglifyJSPlugin
***隐藏网址***
通过对代码的压缩处理以及去除冗余，大大减小了打包资源的体积大小。
二、代码拆分/按需加载
在如 React 或者 vue 构建的单页面应用中，对页面路由与视图的控制是由前端来实现的，其对应的业务逻辑都在 js 代码中。
当一个应用设计的页面和逻辑很多的时候，最终生成的 js 文件资源也会相当大。
然而当我们打开一个 url 对应的页面时，实际上需要的并非全部的 js 代码，所需要的仅是一个主的运行时代码与该视图对应的业务逻辑的代码，在加载下一个视图的时候再去加载那部分的代码。
因此，对这方面可做的优化就是对 js 代码进行按需加载。
懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。
在 webpack 中提供了动态导入的技术来实现代码拆分，首先在 webpack 的配置中需要去配置拆分出来的每个子模块的配置：
// webpack.config.js
const path = require(’path’);
const webpack = require(’webpack’);
const UglifyJSPlugin = require(’uglifyjs-webpack-plugin’);
const BundleAnalyzerPlugin = require(’webpack-bundle-analyzer’).BundleAnalyzerPlugin;
const PROJECT_ROOT = path.resolve(__dirname, ’./’);
module.exports = {
entry: {
index: ’./src/index.js’
},
output: {
path: path.resolve(__dirname, ’dist’),
filename: ’.js’,
chunkFilename: ’.child.js’,
},
module: {
rules: [
{
test: /\.js?$/,
use: ’babel-loader’,
include: PROJECT_ROOT,
exclude: /node_modules/
}
]
},
plugins: [
new BundleAnalyzerPlugin(),
new webpack.DefinePlugin({
’process.env.NODE_ENV’: JSON.stringify(process.env.NODE_ENV || ’production’)
}),
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
output: {
comments: false,
beautify: false,
},
mangle: {
keep_fnames: true
},
compress: {
warnings: false,
drop_console: true
},
}
}),
],
resolve: {
extensions:
},
};其中主要需要定义的则是 `output` 中的 `chunkFilename`，它是导出的拆分代码的文件名，这里给它设置为 `.child.js`，其中的 `name` 对应模块名称或者 id，`chunkhash` 是模块内容的 hash。
之后在业务代码中 webpack 提供了两种方式来动态导入：
`import(’path/to/module’) -》 Promise`，
`require.ensure(dependencies: String, callback: function(require), errorCallback: function(error), chunkName: String)`
对于最新版本的 webpack 主要推荐使用 `import()` 的方式（注意：import 使用到了 Promise，因此需要确保代码中支持了 Promise 的 polyfill）。
// src/index.js
function getComponent() {
return import(
/* webpackChunkName: "lodash" */
’lodash’
).then(_ =》 {
var element = document.createElement(’p’);
element.innerHTML = _.join(, ’ ’);
return element;
}).catch(error =》 ’An error occurred while loading the component’);
}
getComponent().then(component =》 {
document.body.appendChild(component);
})可以看到打包的信息：
Hash: d6ba79fe5995bcf9fa4d
Version: webpack 3.6.0
Time: 7022ms
Asset Size Chunks Chunk Names
lodash.89f0.child.js 85.4 kB 0 lodash
index.316e.js 1.96 kB 1 index



+ 1 hidden module可以看到打包出来的代码生成了 `index.316e.js` 和 `lodash.89f0.child.js` 两个文件，后者则是通过 `import` 来实现拆分的。
`import` 它接收一个 `path` 参数，指的是该子模块对于的路径，同时还注意到其中可以添加一行注释 `/* webpackChunkName: "lodash" */`，该注释并非是无用的，它定义了该子模块的 name，其对应与 `output.chunkFilename` 中的 ``。
`import` 函数返回一个 Promise，当异步加载到子模块代码是会执行后续操作，比如更新视图等。
（1）React 中的按需加载
在 React 配合 React-Router 开发中，往往就需要代码根据路由按需加载的能力，下面是一个基于 webpack 代码动态导入技术实现的 React 动态载入的组件：
import React, { Component } from ’react’;
export default function lazyLoader (importComponent) {
class AsyncComponent extends Component {
state = { Component: null }
async componentDidMount () {
const { default: Component } = await importComponent();
this.setState({
Component: Component
});
}
render () {
const Component = this.state.Component;
return Component
? 《Component {...this.props} /》
: null;
}
}
return AsyncComponent;
};在 `Route` 中：
《Switch》
《Route exact path="/"
component={lazyLoader(() =》 import(’./Home’))}
/》
《Route path="/about"
component={lazyLoader(() =》 import(’./About’))}
/》
《Route
component={lazyLoader(() =》 import(’./NotFound’))}
/》
《/Switch》在 `Route` 中渲染的是 `lazyLoader` 函数返回的组件，该组件在 mount 之后会去执行 `importComponent` 函数（既：`() =》 import(’./About’)`）动态加载其对于的组件模块（被拆分出来的代码），待加载成功之后渲染该组件。
使用该方式打包出来的代码：
Hash: 02a053d135a5653de985
Version: webpack 3.6.0
Time: 9399ms
Asset Size Chunks Chunk Names
0.db22.child.js 5.82 kB 0
1.fcf5.child.js 4.4 kB 1
2.442d.child.js 3 kB 2
index.1bbc.js 339 kB 3 index三、抽离 Common 资源
（1）第三方库的长缓存
首先对于一些比较大的第三方库，比如在 React 中用到的 react、react-dom、react-router 等等，我们不希望它们被重复打包，并且在每次版本更新的时候也不希望去改变这部分的资源导致在用户端重新加载。
在这里可以使用 webpack 的 CommonsChunkPlugin 来抽离这些公共资源；
CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。
首先需要在 entry 中新增一个入口用来打包需要抽离出来的库，这里将 `’react’, ’react-dom’, ’react-router-dom’, ’immutable’` 都给单独打包进 `vendor` 中；
之后在 plugins 中定义一个 `CommonsChunkPlugin` 插件，同时将其 `name` 设置为 `vendor` 是它们相关联，再将 `minChunks` 设置为 `Infinity` 防止其他代码被打包进来。
// webpack.config.js
const path = require(’path’);
const webpack = require(’webpack’);
const UglifyJSPlugin = require(’uglifyjs-webpack-plugin’);
const BundleAnalyzerPlugin = require(’webpack-bundle-analyzer’).BundleAnalyzerPlugin;
const PROJECT_ROOT = path.resolve(__dirname, ’./’);
module.exports = {
entry: {
index: ’./src0/index.js’,
vendor:
},
output: {
path: path.resolve(__dirname, ’dist’),
filename: ’.js’,
chunkFilename: ’.child.js’,
},
module: {
rules: [
{
test: /\.js?$/,
use: ’babel-loader’,
include: PROJECT_ROOT,
exclude: /node_modules/
}
]
},
plugins: [
new BundleAnalyzerPlugin(),
new webpack.DefinePlugin({
’process.env.NODE_ENV’: JSON.stringify(process.env.NODE_ENV || ’production’)
}),
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
output: {
comments: false,
beautify: false,
},
mangle: {
keep_fnames: true
},
compress: {
warnings: false,
drop_console: true
},
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: ’vendor’,
minChunks: Infinity,
}),
],
resolve: {
extensions:
},
};运行打包可以看到：
Hash: 34a71fcfd9a24e810c21
Version: webpack 3.6.0
Time: 9618ms
Asset Size Chunks Chunk Names
0.2c65.child.js 5.82 kB 0

webpack如何打包js

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。本文主要和大家介绍了webpack打包js的方法，在代码实践之前，先说一写webpack的基础知识。
1、为什要使用WebPack
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
模块化，让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
Scss，less等CSS预处理器
?
2、什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
3、WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
如果实在要把二者进行比较，Webpack的处理速度更快更直接，能打包更多不同类型的文件。
接下来我们简单为大家介绍
***隐藏网址***
安装webpack
在安装 Webpack 前，你本地环境需要支持 node.js。安装node.js可以参考node官方文档。
使用如下命令在全局安装webpack。
$ npm install webpack -gwebpack已经安装到计算机上，现在可以使用webpack命令了。
在项目中使用webpack
使用以下命令在项目根目录下生成package.json文件。
$ npm init安装webpack到项目中
将webpack加入到pageage.json配制文件中，使用以下命令：
$ npm install --save-dev webpack此时再看package.json文件，对比package.json刚刚创建时，新增加了一段代码。
webpack打包的两种方式
webpack entry《entry》 output （命令行）
webpack -config webpack.conf.js (指定webpack的配置文件)
使用命令行打包js
一：创建两个js文件
创建app.js, sum.js，sum.js导出一个加法的函数，app.js使用这个函数。
二：使用webpack命令打包
在当前目录下使用： webpack app.js bundle.js ; 这里入口是app.js, 输出文件是bundle.js，这样就会看到文件中多出一个bundle.js文件。
创建一个html文件运行，引入bundle.js运行，控制台会打印：sum(21, 22) 43 。
使用webapck的配置文件打包（还是上面的两个js文件）
创建一个webpack.conf.js，编写wepack的配置文件
// 配置文件使用commonjs规范
module.exports = {
// 入口，是一个对象
entry: {
app: ’./app.js’
},
// 输出
output: {
// 带五位hash值的js
filename: ’.js’
}
}在命令行输入：webpack --config webpack.conf.js，发现生成了一个app.dd1c6.js带hash的js文件。将这个js文件引入HTML里面发正常输出：sum(21, 22) 43
配置文件的命名为webpack.config.js，则直接在命令行输入webpack就可以。
webapck配合babel打包ES6、7
在项目根目录安装bable-loader和babel-core，babel-preset
使用npm init生成一个配置文件
npm install babel-loader babel-core --save-dev
新建app.js，index.html，webpack.config.js等文件
编写webpack.config.js
安装babel-preset来指定编译的版本：npm install babel-preset-env --save-dev
在app.js里面随便写一些ES6的语法
使用命令行输入webpack进行编译
webpack配置文件
// 配置文件使用commonjs规范
module.exports = {
// 入口，是一个对象
entry: {
app: ’./app.js’ // 相对路径
},
// 输出
output: {
// 带五位hash值的js
filename: ’.js’
},
// 指定loader
module: {
// rules中的每一项是一个规则
rules:[
{
test: /\.js$/, // 值一个正则，符合这些正则的资源会用一个loade来处理
use: {
loader: ’babel-loader’, // 使用bable-loader来处理
options: { // 指定参数
presets: [
[’babel-preset-env’, {
targets: {
browsers: //具体可以去babel-preset里面查看
}
}]

] // 指定哪些语法编译
}
},
exclude: ’/node_module/’ // 排除在外
}
]
}
}app.js和编译之后带hash的js
// app.js
let func = () =》 {};
const num = 30;
let arr = ;
let newArr = arr.map(item =》 item * 2); // 将以前数组每一项*2
console.log(newArr);
// ==================//
// 编译之后（直接截取了编译的代码）
"use strict";
var func = function func() {};
var num = 30;
var arr = ;
var newArr = arr.map(function (item) {
return item * 2;
}); // 将以前数组每一项*2
console.log(newArr);babel的两个插件：Babel Polyfill 和 Babel Runtime Transform
用来处理一些函数和方法（Genertor,Set,Map,Array.from等未被babel处理，需要上面的两个插件）
Babel Polyfill（全局垫片），npm install babel-polyfill --save, 使用：import "babel-polyfill";
Babel Runtime Transform（为开发框架准备），npm install babel-plugin-transform-runtime --save, npm install babel-runtime --save
新建一个.babelrc来进行配置
app.js里面新增代码
import "babel-polyfill";
let func = () =》 {};
const num = 30;
let arr = ;
let newArr = arr.map(item =》 item * 2); // 将以前数组每一项*2
console.log(newArr);
// 需要babel-polyfill
arr.includes(8);
// Genertor 函数
function* func2() {
}webpack配置
输出
output: {
// 带五位hash值的js
filename: ’.js’
},
// 指定loader
module: {
// rules中的每一项是一个规则
rules:[
{
test: /\.js$/, // 值一个正则，符合这些正则的资源会用一个loade来处理
use: {
loader: ’babel-loader’, // 使用bable-loader来处理
options: { // 指定参数

}
},
exclude: ’/node_module/’ // 排除在外
}
]
}
}.babelrc文件配置
{
"presets": [
["babel-preset-env", {
"targets": {
"browsers":
}
}]
],
"plugins":
}

怎么优化webpack配置

这次给大家带来怎么优化webpack配置，优化webpack配置的注意事项有哪些，下面就是实战案例，一起来看一下。
最近的项目度过了开始忙碌的基建期，也慢慢轻松下来，准备记录一下自己最近webpack优化的措施，希望有温故知新的效果。
项目采用的是vue全家桶，构建配置都是基于vue-cli去改进的。关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释，有助于更好的理解webpack。
仔细总结了一下，自己的优化基本还是网上流传的那几点
通过 externals 配置来提取常用库，引用cdn
合理配置CommonsChunkPlugin善用aliasdllplugin启用预编译happypack多核构建项目
externals
***隐藏网址***
防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
CommonsChunkPlugin
***隐藏网址***
CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk
的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。
resolve.alias
***隐藏网址***
创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块：
不过经过自己的实践最后三点是对自己项目优化最大的。文章也主要对后面几点详细说明一下
原来打包一个项目所需要的时间基本在40秒左右，那再经过后面三步优化大概要多久呢
1.使用dllplugin预编译与引用
首先为什么要引用Dll？在网上浏览了一些文章后，我发现上除了加快构建速度以外，使用webpack的dll还有一个好处。
Dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。
因为使用Dll打包的基本上都是独立库文件，这类文件有一个特性就是变化不大。当我们正常打包这些库文件到一个app.js里的时候，由于其他业务文件的改变，影响了缓存对构建的优化，导致每次都要重新去npm包里寻找相关文件。而使用了DLL之后，只要包含的库没有升级，
增减，就不需要重新打包。这样也提高了构建速度。
那么如何使用Dll去优化项目呢
首先要建立一个dll的配置文件,引入项目所需要的第三方库。这类库的特点是不需要随着版本发布频繁更新，长期稳定。
const webpack = require(’webpack’);
const path = require(’path’);
module.exports = {
entry: {
//你需要引入的第三方库文件
vendor: [’vue’,’vuex’,’vue-router’,’element-ui’,’axios’,’echarts/lib/echarts’,’echarts/lib/chart/bar’,’echarts/lib/chart/line’,’echarts/lib/chart/pie’,
’echarts/lib/component/tooltip’,’echarts/lib/component/title’,’echarts/lib/component/legend’,’echarts/lib/component/dataZoom’,’echarts/lib/component/toolbox’],
},
output: {
path: path.join(dirname, ’dist-’),
filename: ’.js’,
library: ’’,
},
plugins: [
new webpack.DllPlugin({
path: path.join(dirname, ’dll’, ’-manifest.json’),
filename: ’.js’,
name: ’’,
}),
]
};
基本配置参数和webpack基本一模一样，相信来看优化的都明白什么意思，我就不解释了。然后执行代码编译文件。(我的配置文件是放在build里面，下方路径根据项目路径需要变动)
webpack -p --progress --config build/webpack.dll.config.js
当运行完执行后，会生成两个新文件在目录同级，一个是生成在dist文件夹下的verdor.js，里面是刚刚入口依赖被压缩后的代码;一个是dll文件夹下的verdor-manifest.json，将每个库进行了编号索引，并且使用的是id而不是name。
接下去你只要去你的webpack配置文件的里的plugin中添加一行代码就ok了。
const manifest = require(’./dll/vendor-manifest.json’);
...
...,
plugin:[
new webpack.DllReferencePlugin({
context: dirname,
manifest,
}),
]
这时候再执行webpack命令，可以发现时间直接从40秒锐减到了20s左右，整整快了一倍有木有(不知道是不是因为自己依赖库太多了才这样的，手动捂脸)。
2.happypack多线程编译
一般node.js是单线程执行编译，而happypack则是启动node的多线程进行构建，大大提高了构建速度。使用方法也比较简单。以我项目为例,在插件中new一个新的happypack进程出来，然后再使用使用loader的地方替换成对应的id
var HappyPack = require(’happypack’);
...
...
modules:{
rules : [
...
{
test: /\.js$/,
loader:,
include:
},
...
]
},
...
...
plugin:[
//happypack对对 url-loader,vue-loader 和 file-loader 支持度有限，会有报错，有坑。。
new HappyPack({
id: ’happybabel’,
loaders: ,
threads: 4,//HappyPack 使用多少子进程来进行编译
}),
new HappyPack({
id: ’scss’,
threads: 4,
loaders: [
’style-loader’,
’css-loader’,
’sass-loader’,
],
})
]
这时候再去执行编译webpack的代码，打印出来的console则变成了另外一种提示。而编译时间大概从20s优化到了15s左右(感觉好像没有网上说的那么大，不知道是不是因为本身js比重占据太大的缘故)。
3.善用alias
3.配合resolve，善用alias
本来是没有第三点的，只不过在搜索网上webpack优化相关文章的时候，看到用人提到把引入文件改成库提供的文件(原理我理解其实就是1.先通过resolve指定文件寻找位置，减小搜索范围；2.直接根据alias找到库提供的文件位置)。
vue-cli配置文件中提示也有提到这一点，就是下面这段代码
resolve: {
//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
extensions: ,
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
alias: {
’vue$’: ’vue/dist/vue.esm.js’,//就是这行代码，提供你直接引用文件
’@’: resolve(’src’),
}
},
然后我将其他所有地方关于vue的引用都替换成了vue$之后，比如
// import ’vue’;
import ’vue/dist/vue.esm.js’;
时间竟然到了12s，也是把我吓了一跳。。
然后我就把jquery，axios，vuex等等全部给替换掉了。。大概优化到了9s左右，美滋滋，O(∩_∩)O~~
4.webpack3升级
本来是没第四点，刚刚看到公众号推出来一篇文章讲到升级到webpack3的一些新优点，比如Scope Hoisting(webpack2升级到webpack3基本上没有太大问题)。通过添加一个新的插件
// 2017-08-13配合最新升级的webpack3提供的新功能，可以使压缩的代码更小，运行更快
...
plugin : [
new webpack.optimize.ModuleConcatenationPlugin(),
]
不过在添加这行代码之后，构建时间并没有太大变化，不过运行效率没试过，不知道新的效果怎么样
好了基本上感觉就是以上这些效果对项目的优化最大，虽然没有到网上说的那种只要3~4秒时间那么变态，不过感觉基本8,9秒的时间也可以了。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
Angular 4中显示CSS样式
vue综合组件通信使用案例

webpack打包优化怎么做（提升webpack打包速度）

很多用Vue开发的项目中，都会遇到首屏加载慢，chunk-vendor.js动不动就好几MB，那么如何通过Vue的内部配置去优化我们的Vue项目呢?这是手头的一个项目，同样的源码，同样的服务器，打开了Disablecache，目前完全加载是6.82秒
优化后，加载时间才2.59秒，提升了60%的加载
其实出发点还是比较好理解的，压缩js和使用CDN因为我这边用的Linux服务器，然后安装的宝塔，使用的Nginx，默认是开启了Gzip，所以我们可以先安装compression-webpack-pluginyarnaddcompression-webpack-plugin或者npminstallcompression-webpack-plugin
然后，我们在vue.config.js中做如下的配置constCompressionWebpackPlugin=requiremodule.exports={productionSourceMap:false,configureWebpack:config={if{//开启gzip压缩config.plugins.push)}}}
这样，Gzip就可以在打包的时候生成了，如下图，打包前后体积还是很明显的，但是这样是不够的
为了防止文件过大，我们先把公共代码分离config.optimization={runtimeChunk:single,splitChunks:{chunks:all,maxInitialRequests:Infinity,minSize:20000,cacheGroups:{vendor:{test:/node_modules/,name{constpackageName=module.context.match/)return`npm.${packageName.replace}`}}}}}
打包后的效果，如下图
那么，在最后就是用CDN这里就引入一个vue.js作为例子config.externals={vue:Vue}
需要在你的public/index.html的body标签中引用对应版本的vue.js
然后整体打包，ok，附上完整的vue.config.jsconstpath=requireconstCompressionWebpackPlugin=requireconstappname=indexfunctionresolve{returnpath.join}constisProduction=process.env.NODE_ENV===production//vue.config.jsmodule.exports={productionSourceMap:false,outputDir:appname+OutPutFile,//运行时生成的生产环境构建文件的目录assetsDir:appname+public,//放置生成的静态资源的目录indexPath:appname+.html,//指定生成的index.html的输出路径也可以是一个绝对路径。configureWebpack:config={if{//开启gzip压缩config.plugins.push)config.optimization={runtimeChunk:single,splitChunks:{chunks:all,maxInitialRequests:Infinity,minSize:20000,cacheGroups:{vendor:{test:/node_modules/,name{constpackageName=module.context.match/)return`npm.${packageName.replace}`}}}}}config.performance={hints:warning,//入口起点的最大体积maxEntrypointSize:50000000,//生成文件的最大体积maxAssetSize:30000000,//只给出js文件的性能提示assetFilter:function{returnassetFilename.endsWith}}config.externals={vue:Vue}}},chainWebpack:={config.resolve.alias.set).set).set).set).set).set).set)},css:{},lintOnSave:undefined}
最后的一点建议，如果条件允许，能走cdn尽量走cdn，效果还是比较惊人的。

webpack如何打包js与css文件

这次给大家带来webpack如何打包js与css文件，webpack打包js与css文件的注意事项有哪些，下面就是实战案例，一起来看一下。
打包压缩js与css
由于webpack本身集成了UglifyJS插件（webpack.optimize.UglifyJsPlugin）来完成对JS与CSS的压缩混淆，无需引用额外的插件,
其命令 webpack -p 即表示调用UglifyJS来压缩代码，还有不少webpack插件如 html-webpack-plugin 也会默认使用UglifyJS。
uglify-js的发行版本只支持ES5，如果你要压缩ES6+代码请使用开发分支。
UglifyJS可用的选项有：
parse 解释
compress 压缩
mangle 混淆
beautify 美化
minify 最小化//在插件HtmlWebpackPlugin中使用
CLI 命令行工具
sourcemap 编译后代码对源码的映射，用于网页调试
AST 抽象语法树
name 名字，包括变量名、函数名、属性名
toplevel 顶层作用域
unreachable 不可达代码
option 选项
STDIN 标准输入，指在命令行中直接输入
STDOUT 标准输出
STDERR 标准错误输出
side effects函数副作用，即函数除了返回外还产生别的作用，比如改了全局变量
列一份配置：
//使用插件html-webpack-plugin打包合并html
//使用插件extract-text-webpack-plugin打包独立的css
//使用UglifyJsPlugin压缩代码
var HtmlWebpackPlugin = require(’html-webpack-plugin’);
var ExtractTextPlugin = require(’extract-text-webpack-plugin’);
var webpack = require("webpack");
module.exports = {
entry: {
bundle : ’./src/js/main.js’
},
output: {
filename: ".js",
path: __dirname + ’/dist’
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: ’url-loader?limit=8192’
}
]
},
resolve:{
extensions: //用于配置程序可以自行补全哪些文件后缀
},
plugins:[
new HtmlWebpackPlugin({
title: ’hello webpack’,
template:’src/component/index.html’,
inject:’body’,
minify:{ //压缩HTML文件
removeComments:true, //移除HTML中的注释
collapseWhitespace:true //删除空白符与换行符
}
}),
new ExtractTextPlugin(".css"),
new webpack.optimize.UglifyJsPlugin({
compress: { //压缩代码
dead_code: true, //移除没被引用的代码
warnings: false, //当删除没有用处的代码时，显示警告
loops: true //当do、while 、 for循环的判断条件可以确定是，对其进行优化
},
except: //混淆,并排除关键字
})
]
};相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
vue-router内query动态传参如何处理
如何使用webpack+vue环境局域网