webpack是一个用于web项目的模板打包工具。在大部分的使用场景中，我们将它看作是一个web前端模块打包工具，它将资源的本身当做模块，这些模块可以被导入和操作，最后打包到指定的文件中
下面详细讲解各个配置项的配置方法
首先写一个简单的webpack.config.js文件
module.exports = {
entry:'./src/index.js',
output:{
path:'builds',
filename:'bundle.js',
},
}为了在配置文件中使用的路径全部是相对于该配置文件的具体路径，可以引入path模块
var path = require('path')
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
output:{
path: path.resolve(__dirname,'builds'),
filename:'bundle.js',
},
}entry
entry配置项标识了项目的入口文件，该配置项的值可以为字符串、数组和对象三种形式。字符串和数组类型相当于json对象的简写
对象entry
对象entry的主要形式如下
entry: {
<key>: <value>
}key可以是简单的字符串，比如：’app’, ‘main’, ‘entry-1’等。并且对应着output.filename配置中的[name]变量
entry: {
'index': './src/index.js'
},
output: {
path: './build',
filename: '[name]-build.js'
}value的值可以为字符串或数组。如果是字符串的话，可以为字符串路径，也可以为安装的npm包；如果是数组，则数组中元素需要是合理字符串值。数组中的文件一般是没有相互依赖关系的，但是又处于某些原因需要将它们打包在一起
数组entry和字符串entry
数组entry是对象entry中的value值组成的数组，可以用于多入口文件的配置，字符串entry只能用于单入口文件的配置
//字符串entry文件配置
entry: './src/index.js'
//数组entry文件配置
entry: [
'./src/index1.js',
'./src/index2.js'
]output
output项告诉webpack怎样存储输出结果以及存储到哪里。output常用配置项如下：
- path：必须配置项，表示生成文件的根目录，需要传入一个绝对路径。
- filename：必须配置项，表示生成文件的文件名，规则有以下三种
- [name]：指代入口文件的name，也就是上面提到的entry参数的key
- [hash]：指代本次编译的一个hash版本。值得一提的是，只要是在同一次编译过程中生成的文件，这个[hash]值就是一样的，对于文件名相当于一次全量的替换，从缓存的层面来说，每次编译的文件都需要重新加载
- [chunkhash]：指代的是当前chunk的一个hash版本。也就是说，在同一次编译中，每一个chunk的hash都是不一样的；而在两次编译中，如果某个chunk根本没发生变化，那么该chunk的hash也就不会发生变化。从缓存层面来讲，就是把缓存的粒度精细到具体某个chunk，只要chunk不变，该chunk的浏览器缓存就可以继续使用。
entry: {
index:'./src/index.js'
},
output:{
path:'./builds',
filename:'[name]-[chunkhash:8]-bundle.js',
},- publishPath： 表示一个URL路径（指向生成文件的根目录），用于生成css/js/image/字体文件等资源的路径。
publicPath参数跟path参数的区别是：path参数其实是针对本地文件系统的，而publicPath则针对的是浏览器；因此，publicPath既可以是一个相对路径，如示例中的’../../../../build/’，也可以是一个绝对路径如http://www.xxxxx.com/。一般来说，我还是更推荐相对路径的写法，这样的话整体迁移起来非常方便。那什么时候用绝对路径呢？其实也很简单，当你的html文件跟其它资源放在不同的域名下的时候，就应该用绝对路径了，这种情况非常多见于后端渲染模板的场景。
- chunkFilename： 指定除入口文件外的chunk的命名方法，其参数与filename的参数类似
Loaders和rules
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件（如jsx、图片、css等文件），就需要使用 loader 进行转换。loader可以通过管道方式链式调用。每个loader可以把资源转换成任意格式并传递给下一个loader，但是最后一个loader必须返回JavaScript
一般情况下，Loader一般以xxx-loader的方式命名，xxx代表了这个loader要做的转换功能。在引用loader的时候可以使用全名xxx-loader，或者使用短名xxx。
Loader的常用配置项如下：
* test： 指示当前配置项针对哪些资源，该值一般是一个正则表达式，用来指定文件名
* exclude： 表示需要忽略的资源，该值一般是一个正则表达式
* include： 表示该配置项针对的文件目录，该值一般是正则表达式，include和test的配置项共同构成了该loader的作用范围
* loader/loaders： 表示用哪个或哪些loader来处理目标资源，loader的值一般是一个字符串，laoders的值一般是一个数组
module: {
loaders: [
{
test: /\.css$/,
include: /src/
exclude: /node_modules/
loader: 'style-loader!css-loader'
}
]
}上述例子的loader执行顺序是将src文件夹下的css文件内容先经过css-loader处理（路径处理、import处理等），然后经过style-loader处理（包装成JS文件，运行的时候直接将样式插入DOM中。）
值得注意的是loaders的配置项是在webpack1.X版本中使用的，在webpack2.X中引入了更加强大的rules，当然在2.X中loaders的属性名依然可以被解析
2.X将loaders配置项修改为了rules，将loader/loaders改为use，并且在rules中不能使用链式书写，loader引用loader必须使用全名
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true
}
}
]
},
]
}Plugins
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和plugins是两个完全不同的东西。Loaders是在打包构建过程中用来处理源文件的（JSX、SCSS、LESS等），一次处理一种文件；Plugins并不直接操作单个文件，它直接作用于整个构建过程
和Plugins
插件使用方法及常用插件
要使用某个插件，我们需要通过npm安装它，然后在webpack配置中的plugins关键字部分添加该插件的一个实例。
下面介绍一下常用的插件
extract-text-webpack-plugin
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}该插件会将所有的入口chunk中引入的css文件移动到分哭的css文件。因此，样式不会内联到JavaScript中，但会放到一个单独的css包文件中。
其主要配置项如下
- id：字符串，表示此插件实例的唯一ID。（仅限高级用途，默认情况下自动生成）
- filename： 字符串，必填。表示生成恩建的文件名。会包含[name]、[id]和[contenthash]
- allChunks：布尔值。表示向所有额外的chunk提取（默认肢体去初始加载模块）
- disable：布尔值。禁用插件
- ignoreOrder：禁用顺序检查，默认false
ExtractTextPlugin.extract(options: loader | object)从一个已存在的加载器 (loader) 中创建一个 提取 (extracting) 加载器。主要配置项
- options.use： (必填), 加载器 (Loader), 被用于将资源转换成一个输出的 CSS 模块
- options.fallback： 加载器 (例如 ‘style-loader’), 应用于当 css 没有被提取(也就是一个额外的 chunk，当 allChunks: false)
- options.publicPath：对加载器的 publicPath 配置重写
HtmlWebpackPlugin
HtmlWebpackPlugin简化了HTML文件的创建，以便为您的webpack包提供服务。 这对于在文件名中包含每次会随着变异会发生变化的哈希的webpack bundle尤其有用。
const HtmlWebpackPlugin = require('html-webpack-plugin');
module: {
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/app/index.html',
inject: true,
chunks: ['vendor', 'index'], //会自动将js文件插入html中
chunksSortMode: 'dependency',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}),
]
}
该插件常用配置项如下：
* filename： 输出文件的文件名称，默认为index.html。此外，还可以为输出文件制定目录位置
1、filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构的。
2、指定生成的html文件内容中的link和script路径是相对于生成目录下的，写路径的时候请写生成目录下的相对路径。
- template：本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)，比如 handlebars!src/index.hbs；为template指定的模板文件没有指定任何loader的话，默认使用ejs-loader。如template: ‘./index.html’，若没有为.html指定任何loader就使用ejs-loader
- templateContent： string|function，可以指定模板的内容，不能与template共存。配置值为function时，可以直接返回html字符串，也可以异步调用返回html字符串。
inject：向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。
1、true或者body：所有JavaScript资源插入到body元素的底部
2、head: 所有JavaScript资源插入到head元素中
3、false： 所有静态资源css和JavaScript都不会注入到模板文件中hash： true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示
html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>- chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的chunk应该是不相同的，需要通过该配置为不同页面注入不同的chunk；
- excludeChunks： 这个与chunks配置项正好相反，用来配置不允许注入的thunk。
chunksSortMode： none | auto| function，默认auto； 允许指定的thunk在插入到html文档前进行排序。
function值可以指定具体排序规则；auto基于thunk的id进行排序； none就是不排序
xhtml： true|fasle, 默认false；是否渲染link为自闭合的标签，true则为自闭合标签
- cache： true|fasle, 默认true； 如果为true表示在对应的thunk文件修改后就会emit文件
- showErrors： true|false，默认true；是否将错误信息输出到html页面中。这个很有用，在生成html文件的过程中有错误信息，输出到页面就能看到错误相关信息便于调试。
- minify：{….}|false，传递 html-minifier 选项给 minify 输出，false就是不使用html压缩。
html-webpack-plugin的一个实例生成一个html文件，如果单页应用中需要多个页面入口，或者多页应用时配置多个html时，那么就需要实例化该插件多次；即有几个页面就需要在webpack的plugins数组中配置几个该插件实例：
plugins: [
new HtmlWebpackPlugin({
template: 'src/html/index.html',
excludeChunks: ['list', 'detail']
}),
new HtmlWebpackPlugin({
filename: 'list.html',
template: 'src/html/list.html',
thunks: ['common', 'list']
}),
new HtmlWebpackPlugin({
filename: 'detail.html',
template: 'src/html/detail.html',
thunks: ['common', 'detail']
})
]如上例应用中配置了三个入口页面：index.html、list.html、detail.html；并且每个页面注入的thunk不尽相同；类似如果多页面应用，就需要为每个页面配置一个；
CommonsChunkPlugin
CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.bundle.js' //gave the chunk a different name
}),
]resolve
resolve的配置标识模块如何解析。例如，当在 ES2015 中调用 import “lodash”，resolve 选项能够对 webpack 查找 “lodash” 的方式去做修改（查看模块）。
resolve.alias改配置对象键名为模块名，键值为新的路径。类似于替换但是更比替换更好
const path = require('path')
const resolveApp = relativePath => path.resolve(appDirectory, relativePath),
appSrc = resolveApp('src'),
appUrl = resolveApp('src/app'),
appImages = resolveApp('src/assets/images'),
appComponents = resolveApp('src/app/components'),
appPages = resolveApp('src/app/pages'),
appUtils = resolveApp('src/app/util');
resolve: {
alias: {
Src: appSrc,
Images: appImages,
Components: appComponents,
Util: appUtils
},
},
2353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
