webpack 4.x的特性
webpack 4.x有个很大的特性，就是约定大于配置，目的是为了减少配置文件的体积；
- 约定默认的打包入口路径是
src/index.js； - 约定默认的打包输出路径是
dist/main.js；
- 所以说现在的项目中，可以不用特地去配置入口和出口路径，只需要在指定的目录下建立对应的
js文件即可。
webpack 4.x将CLI（命令行工具）已经转移到了一个单独的包webpack-cli,所以使用webpack需要npm install webpack webpack-cli -D
wepack 4.x的几个基本模块
模块
- 通过将
mode 参数设置为 development, production，可以启用对应环境下 webpack 内置的优化。默认值为 production。
development：生产环境，不压缩；production：部署环境，需要压缩；
入口entry
- 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，webpack 会找出有哪些模块和 library 是入口起点（直接和间接）依赖的;
- 默认值是
./src/index.js； - 可以手动设置；
module.exports = {
entry: './path/to/my/entry/file.js'
};
出口output
output属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，主输出文件默认为 ./dist/main.js，其他生成文件的默认输出目录是 ./dist。
const path = require('path');
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'), // 绝对路径
filename: 'my-first-webpack.bundle.js' // 输出的js文件名
}
};
loader
- 由于
webpack自身只支持js文件，所以当解析其他文件时，需要使用loader来让webpack去处理那些非javascript文件，并且先将他们转换为有效的模块，然后在添加到依赖图中； - 在
webpack中配置loader必须有两个特征：
test属性，用于标识出应该被对应的loader进行转换的某个文件；use属性，表示进行转换时，应该使用哪个loader
- 注：
- 对一个单独的
module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。 - 在 webpack 配置中定义
loader 时，要定义在module.rules 中，而不是 rules。
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
babel-loader
- 将ES6转成 ES5
npm install -D babel-loader @babel/core @babel/preset-env webpack;
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] // 与ES6相关的bebal
presets: ["@babel/preset-flow"] // flow 相关的babel,需要 install
// ...
}
}
}
]
}
css-loader & style-loader & less-loader...
- 支持css以及less，sass等
npm install css-loader style-loader less less-loader -D- 需要注意的是：webpack中的loader的执行顺序是从右到左的，也就是说先执行的
css-loader，然后将解析后的数据传递（webpack支持链式操作）给style-loader，如果将两者的执行顺序写错了，则会执行失败。 - 同时需要注意的是：当需要将css单独抽离成一个文件，比如添加
mini-css-extract-plugin时，此时再使用style-loader，两者是有冲突的。
{
test: /\.css$/,
use: [
'style-loader', // 将解析后的css放在head中的style下
'css-loader', // 解析css
]
}
// ----------- 分割线 -------------
{
test: /\.less$/,
use: [
'style-loader', // 将解析后的css放在head中的style下
'css-loader', // 解析css
'less-loader', // 解析less
]
}
插件plugins
- loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，插件的范围包括：打包优化、资源管理和注入环境变量。
- 想要使用一个插件，你只需要 require()，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中，先定义一个实例对象，因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'}) // 打包生成的js文件，将运行在最基本的html模板中
]
};
- 其中
html-webpack-plugin 会为你的应用程序生成一个 html 文件，然后自动注入所有生成的 bundle.js。
常用的plugins
CommonsChunksPlugin: 将chuks相通的模块代码提去成公共js；CleanWebpackPlugin: 清理构建目录；ExtractTextWebpackPlugin: 将css从bundle文件中提去出来；CopyWebpackPlugin: 将文件或者文件夹拷贝到构建的输出目录；HtmlWebpackPlugin: 创建html文件去接受数除的bundle；UglifyjsWebpackPlugin: 压缩js（webpack4.x mode=production已经开启）；ZipWebpackPlugin: 将打包出的资源生成一个zip包；
配置resolve
resolve: {
extensions: ['.js','.jsx','.json','.css','.less'] // 表示这些文件的后缀名，忽略不计；
alias: {
'@': path.join(__dirname,'./src') //这样，在项目中,`@`就表示项目根目录src的这一层路径；
}
}
文件监听
watch
- 文件监听是发现源码发生变化时，自动重新构建出新得输出文件；
- 缺陷：我们必须手动刷新页面；
- 开启监听模式有两种方式：
- 启动webpack命令式，带上
--watch 参数；
- 在配置
webpack.config.js中设置 watch: true
module.exports = {
watch: true, // 默认false
watchOptions: { // 只有开启监听模式时，watchOptions才有意义
ignored: /node_modules/, // 不监听的文件，支持正则
aggregateTimeout: 300, // 监听到变化发生后，等300ms再去执行，默认 300ms
poll: 1000 // 判断文件是否发生变化，是通过轮询的方式去实现的，默认每秒问1000次
}
}
webpack-dev-serve
- 热更新
npm install --save-dev webpack-dev-server- 需要去
package.json下的scripts中： - 增加内容为：
"dev":"webpack-dev-server --open --port 3000 --hot"
--open：表示自动打开浏览器--hot：实现热刷新--port 3000：改变端口号--progress：打包进度--compress：压缩- 此时：启动的项目打包后的
main.js是在项目的根路径下，是在虚拟磁盘下，不是物理磁盘；
devServer:{
contentBase: './dist',
hot: true // 开启热更新
},
文件指纹（Hash）
Hash:
- 和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改;
Chunkhash:
- 和 webpack 打包的
chunk有关，不同的 entry会生成不同的 chunkhash值； - 一般 js 文件使用这块比较多，这里我们只需要设置
output 即可
output: {
filename: '[name][chunkhash:8].js',
path: __dirname+ './dist'
},
Contenthash:
- 根据文件内容来定义
hash，文件内容不变，则 contenthash 不变； - 一般
css 文件使用这个 Contenthash 比较多，需要将css 单独抽离成文件的情况下使用；
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader, // 此时与style-loader功能互斥
'css-loader', // 解析css
'less-loader', // 解析less
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name][contenthash:8].css'
})
]
其他内容
postcss-loader & Autoprefixing
- 为 css3 属性加上前缀
npm install postcss-loader autoprefixer -D
module: {
rules: [
{
text: /\.less$/,
use: [
'css-loader',
'less-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer)({
browsers: [ // 兼容浏览器版本
'last 2 version', // 浏览器最近的版本
'>1%', // 版本使用人数大于 1%
'IE 10', // IE 10 以上
// ....
]
})
]
}
}
]
}
]
}
px 转 rem
px2rem-loader：将 px 转换成 rem；
npm install lib-flexible -Swidth: 75px：这种写法会将 px 转换成 rem- 在px后面添加/no/，不会转化px，会原样输出。 — 一般border需用这个
- 在px后面添加/px/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个
- lib-flexible;：手淘适配方案
npm install px2rem-loader -D
module: {
rules: [
{
text: /\.less$/,
use: [
'css-loader',
'less-loader',
{
loader: 'px2rem-loader',
options: {
remUnit: 75, // rem 相对于 px的转换单位，此时 1 rem = 75px
remPrecision: 8 // px 转换成小数点的长度
}
}
]
}
]
}
- 在
index.html 中新建script标签，手动的将 lib-flexible/flexible.js中的内容拷贝进去，因为这块需要初始化就要使用。
静态资源的内联：raw-loader
- 代码层面的意义：
- 页面框架的初始化脚本，比如移动端适配，脚本就需要在加载页面之前执行
- css内联避免页面闪动
- 请求层面的意义：减少 HTTP 请求数量
npm install raw-loader -D
<!-- 以上一个移动端适配需要内联到 html 中为例 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wepack_Demo</title>
<!-- 因为使用了 html-webpack-plugin,默认使用 EJS模板引擎，因此可以直接使用 ${ } -->
/***
* 为什么加上 babel-loader：因为内联的脚本，里面可能使用了 ES6 语法，因此需要使用 babel-loader 转换
*/
<script>${ require('rwa-loader!babel-loader!../../node_modules.lib-flexible/flexible.js') }</script>
</head>
<body>
<div class="root"></div>
</body>
</html>
扫一扫
279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
