webpack使用体验
node知识
path.resolve
path.resolve(from[...pathname], to)将参数to位置的字符解析到一个绝对路径里。
__dirname 当前文件目录绝对路径
__filename 当前文件全路径
demo示例:(当前目录: D:\www\programs\react-prod\config)
// 相对路径根据当前位置绝对路径解析
// ../匹配上一层
// ./ 或者 没有./匹配当前路径
// D:\www\programs\react-prod\config\dist
path.resolve('./dist')
// D:\www\programs\react-prod\dist
path.resolve('../dist')
// D:\www\programs\react-prod\config\www\dist
path.resolve('www/demo', '../dist')
// D:\dist绝对路径直接返回
path.resolve('/dist')
// 如果只传递一个参数，那么相对路径将基于当前命令的执行路径
输出
console.log(path.resolve('./dist'))
console.log(path.resolve(__dirname, './dist'))
当在D:\www\programs\react-prod路径下执行时，分别返回
D:\www\programs\react-prod\dist
D:\www\programs\react-prod\script\dist
当在D:\www\programs\react-prod\script路径下执行时，分别返回
D:\\www\\programs\\react-prod\\script\\dist
D:\\www\\programs\\react-prod\\script\\dist
所以为了表现一致，path里面解析绝对路径，需要加上__dirname
webpack知识
context
配置基础目录，使config中的相对路径基于这个目录,这样，不管webpack配置文件放在哪里，我们在文件内部引用外部文件时，都可以根据一个相同的基础目录解析文件，只需修改config.context一个地方就可以了。
entry入口
用法：
- 单入口: entry: string|Array<string>,传入数组会将数组中的文件作为统一一个入口一起打包成一个文件
- 多入口: 用法：entry: {[entryChunkName: string]: string|Array<string>}根据入口打包成多个js文件
output输出
在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：
- filename 用于输出文件的文件名。
- 目标输出目录 path 的绝对路径。
常用loaders
1.css-loader
css加载器 css-loader, style-loader
css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们
style-loader用来将解析出来的css内容添加到页面的style标签里面。但是一般情况下我们都会将css样式与js文件分离，这样可以有效减小代码体积。2.66kb -> 816bytes+27bytes
css-loader+style-loader一般需要结合两个plugin一起使用，分别用于将css分离和压缩
// 用于提取css的plugin
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 用于压缩css的plugin
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
...
// module.rules[num]
{
test: /\.css$/,
// 它会将所有的入口chunk(entry chunks)中引用的 *.css，
// 移动到独立分离的 CSS 文件
// css bundle 与 js bundle 并行加载,加快页面初始化
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
// style-loader用来将css-loader解析(import,url()等)出来的css
// 插入到页面的<style>标签里面，没有则无法正常引用
// 使用etp时则作为降级处理
// use: ['style-loader', 'css-loader']
}
...
plugins: [
// name为入口里面的名字，将抽离的css合并成文件
// 对每个入口chunk都生成一个对应的文件
// 所以当你配置多个入口 chunk 的时候
// 必须使用[name],[id]或[contenthash]
new ExtractTextPlugin('css/[name].css'),
// 压缩css
new OptimizeCssAssetsPlugin({
// 匹配需要压缩的文件
assetNameRegExp: /\.css$/g,
// 压缩使用的插件
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: {removeAll: true } },
canPrint: true
})
]
2.file-loader
file-loader用来解析资源文件，可以自定义解析生成的文件名，路径等等，用来处理css中的background-image以及js中import一个img等引用资源的情景。
file-loader存在一个很大的坑就是，我们往往需要使用相对路径去解析打包文件中设计的图片资源，并且将打包生成的css，images分别放在不同的目录，比如我们规定解析生成的img的路径名称为：assets/images/demo.png,那么不管是在css还是在js的img引用中，引用路径都会是'assets/images/demo.png',在html中，由于本身目录结构与asset平级，可以顺利引用，但是在css中就不行了，引用路径就会变成dist/assets/css/assets/image/demo.png。emmm，自然是不行的。在网上找了一大圈，全是什么乱七八糟的，要么牛头不对马嘴，要么自娱自乐，要么强行装逼...真是无力吐槽。真正有用的信息总是被垃圾信息掩盖，不过费了九牛二虎之力，还是找到了行之有效的解决办法，传送门。这里利用了extract-text-webpack-plugin的publicPath属性，这个属性的作用是，重新设置loader解析出来的文件的publicPath。作用就是，比如你在css里面本来的引用路径是'assets/images/demo.png',通过设置publicPath，引用路径就变成了'../../assets/images/demo.png'。根据本例的路径，(返回到assets层，再返回到dist层)最终解析的路径就是'dist/assets/images/demo.png'。ok，至此，import、url()的路径都是正常的啦。网上有一种解决方案是使用绝对路径，额，大胸弟，我觉得这个很不妥吧，你能保证你的目录外面没有嵌套个几层？比如给咱的应用套个apapa的壳？(emmmm.很偏激，欢迎指正) 可以结合图片压缩plugin，比如压缩生成的雪碧图。
{
test: /\.(png|svg|jpe?g|gif)$/i,
use: {
loader: 'file-loader',
options: {
name: 'assets/images/[name].[ext]'
}
}
}
// css-loader做如下修改
{
test: /\.css$/,
// 它会将所有的入口 chunk(entry chunks)中引用的 *.css，
// 移动到独立分离的 CSS 文件
// css bundle 与 js bundle 并行加载
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
// 定义文件内部引用的路径
// 原路径加上../../(基于assets/images/)
// 用来处理url文件引用
+ publicPath: '../../',
use: 'css-loader'
})
}
3.babel-loader
babel-loader的作用是在webpack里面使用babel。emmm....
用法如下
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
// 依赖babel-loader,babel-core
// 等价于
// loader: 'babel-loader?presets=env&compact=false',
loader: 'babel-loader',
options: {
// 将es6的语法转换成es5
presets: [
["env", {
// 如果兼容性要求不高，可以添加target属性
// 减少polyfill的代码量，并且直接使用es6新特性
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
},
// 交由 Webpack 来处理模块化(决定使用import/require)
// 通过其 TreeShaking 特性将有效减少打包出来的JS文件大小867bytes->817bytes
"modules": false
}]
],
// babel-plugin-transform-runtime
// babel-runtime
// 避免模块的重复引用,polyfills功能,修复es6高级语法不兼容问题
// 与babel-polyfill的区别在于runtime会按需加载，不会污染全局
plugins: ['transform-runtime'],
// 缓存编译结果
cacheDirectory: true,
// 去掉多余的空行与换行符
compact: true
}
}
}
4.ts-loader
使用ts开发时，需要使用ts-loader进行type check，但是ts-loader在执行检测的过程中，是单线程执行，这会造成编译时间巨长无比。在这里使用awesome-typescript-loader替代
{
test: /\.tsx?$/,
use: {
loader: 'awesome-typescript-loader',
options: {
useBabel: true,
babelOptions: {
babelrc: false, /* Important line */
presets: [
["env", { "targets": "last 2 versions, ie 11", "modules": false }]
],
// polyfill
plugins: ['transform-runtime'],
},
babelCore: "babel-core", // needed for Babel v7
errorsAsWarnings: true, // 类型错误warning，而不是error
}
},
常用插件
1.HtmlWebpackPlugin
该插件将为你生成一个HTML5文件，其中包括使用script标签的body中的所有webpack包
new HtmlWebpackPlugin({
// 定义html文件的title，如果指定模板则无效
title: '我的生涯一片无悔，想起那天下午夕阳下的奔跑，那是我逝去的青春',
favicon: './assets/images/favicon.ico',
template: './template/page.html',
filename: 'index.html',
// 只引入指定的入口文件生成的chunks,默认引入所有
chunks: ['bar'],
// 将生成的文件插入html中的位置
inject: 'body',
// 给生成的js,css添加一个唯一的hash
// assets/js/bar.js?b34fce8721458861ac22
hash: true,
cache: true
// 使用插件，丰富template
// 将生成的文件插入html中的位置
// html-webpack-template结合使用时需要置为false
// 个人觉得不好用，不够直观，不玩了
// inject: false,
// template: require('html-webpack-template'),
// appMountId: 'app',
}),
2.clean-webpack-plugin
清除文件夹，比如清除之前生成的dist
// 清理dist,默认基于__dirname,可以自己传参配置,
// 如果目录在root之外，则无法顺利清除
// root需要包含被清除目录
new CleanWebpackPlugin(['dist'], {root: path.resolve(__dirname, '../')}),
3.extract-text-webpack-plugin与optimize-css-assets-webpack-plugin
分离cs压缩css
// 它会将所有的入口 chunk(entry chunks)中引用的 *.css，
// 移动到独立分离的 CSS 文件
// css bundle 与 js bundle 并行加载
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
// 定义文件内部引用的路径
// 原路径加上../../(基于assets/images/)
// 用来处理url文件引用路径不正确问题
publicPath: '../../',
use: 'css-loader'
})
// name为入口里面的名字，将抽离的css合并成文件
// 所以一个入口生成一个css文件，在HtmlWebpackPlugin中
// 将根据入口将对应的css文件绑定到html
// 对每个入口chunk都生成一个对应的文件
// 所以当你配置多个入口 chunk 的时候
// 必须使用[name],[id]或[contenthash]
new ExtractTextPlugin('assets/css/[name].css'),
// 压缩css
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
})
4.new webpack.optimize.UglifyJsPlugin()
压缩打包后的文件
使用插件替代uglifyjs-webpack-plugin
// 压缩打包后的文件
new UglifyJSPlugin({
// 生产环境使用source-map
sourceMap: true
})
5.hard-source-webpack-plugin
缓存编译结果，加速编译，效果显著
// 缓存编译结果，缩短编译时间
new HardSourceWebpackPlugin(),
概念
webpack打包的代码分成三个部分，第一个是自己编写的代码，第二部分为引入的第三方库与依赖，第三个部分是webpack用来进行模块加载与逻辑解析(runtime)和模块交互的部分(mainfest)
