webpack作用
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
输入 - webpack - 输出
webpack使用
简单的webpack打包配置：
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: 'index.html'})
]
}
entry： 文件图表入口的配置项，可以是一个数组；
output： 输出配置，告诉webpack如何处理归拢在一起的代码
loaders：告诉webpack该如何分类处理输入的文件
Plugins： 由于 loader 仅在每个文件的基础上执行转换，如果要对文件进行全局的转换，可以使用Plugins配置
entry配置
如果有多个入口文件，可以配置成Object、数组、字符串；
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
output配置
output需要设置为一个object，至少需要指定名称(filename)和路径(path)两个值。
其他的参数有：
chunkFilename：非入口的 chunk(non-entry chunk) 的文件名，路径相对于 output.path 目录。
crossOriginLoading： 此选项启用跨域加载(cross-origin loading) chunk。
devtoolLineToLine：所有/指定模块启用行到行映射(line-to-line mapped)模式。
sourceMapFilename：JavaScript 文件的 SourceMap 的文件名。它们在 output.path 目录中。
其他..
更多参数
loaders配置
loader 是对应用程序中资源文件进行转换。它们是（运行在 Node.js 中的）函数，可以将资源文件作为参数的来源，然后返回新的资源文件。
简单配置
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
}
test：匹配需要处理的文件
loader： 需要使用的loader名称
include：匹配需要处理的文件
exclude：过滤不需要处理的文件
Loader 特性
- loader 支持链式传递。能够对资源使用流水线(pipeline)。loader 链式地按照先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
- loader 可以是同步或异步函数。
- loader 运行在 Node.js 中，并且能够执行任何可能的操作。
- loader 接收查询参数。用于 loader 间传递配置。
- 插件(plugin)可以为 loader 带来更多特性。
- loader 能够产生额外的任意文件。
常用的loader
- babel-loader ES6转换为ES5
- css-loader css打包
- json-loader
- less-loader
- style-loader
通过注入<style>标签将CSS添加到DOM中 - url-loader
url加载器的功能类似file加载器，但是在文件大小低于指定的限制时（单位 bytes）可以返回一个 Data Url。
Plugins配置
插件是 wepback 的支柱功能。在你使用 webpack 配置时，webpack 自身也构建于同样的插件系统上！插件目的在于解决 loader 无法实现的其他事。
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
使用
由于 plugin 可以携带参数/选项，你必须在 wepback 配置中，向 plugins 属性传入 new 实例。
常用的plugins
如果遇到不认识的plugins可以到github上搜索
1.BannerPlugin
作用：为每个编译之后的文件头部添加信息
new webpack.BannerPlugin('This file is created by yuyouwen')
2.CommonsChunkPlugin
作用：提取公共代码
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
})
参数：
- name 公共代码块的名称
- filename 公共文件的名称
- minChunks 这个函数会被 CommonsChunkPlugin 插件回调,并将module 和 count 参数传入
- chunks 指定需要提取的代码块名称，如果不指定，所有的入口代码都会被选择
3.DefinePlugin
允许你创建一个在编译时可以配置的全局常量。
4.UglifyJsPlugin
这个插件使用 UglifyJS 去压缩你的JavaScript代码
5.ExtractTextPlugin
将css代码抽离到单独的文件
6.optimize-css-assets-webpack-plugin
压缩css代码
7.HtmlWebpackPlugin
简化HTML文件的创建
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
})
配置
- filename 创建的文件名称(包含路径)
- template 创建文件的模板
- inject 插入到body后面
- minify 压缩html
- 插入到模板中资源的顺序
8.copy-webpack-plugin
拷贝静态文件到指定目录
配置：
- from 拷贝的源目录
- to 目标目录
- ignore 需要忽略的文件
9.compression-webpack-plugin
压缩插件，通过压缩算法压缩文件
配置：
- asset 压缩之后的文件
- algorithm 压缩算法
- test 需要处理的文件
- threshold 只有大小找过这个阈值才会处理，单位是bytes
- minRatio 只有超过这个压缩比例才会压缩
resolve配置
这些选项能设置模块如何被解析。
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': './',
}
}
常用的配置项
- alias
别名，简化import或者require的引入模块路径；配置后，比如原本是require('moment/min/moment-with-locales.min.js') 可以简写为require('moment') - extensions
对模块后缀名的简写，配置后，原本是require('./components/app.vue') 可以简写为require('./components/app')。