关于Webpack
站长
· 阅读数 25
简介
本质上，webpack是一个现代JavaScript应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图会映射项目所需的每个模块，并生成一个或多个bundle
官网：https://webpack.docschina.org/
webpack4的新特性
1. mode属性：development或production（不设置mode时，默认为production）
如：webpack --mode development/production
针对development（开发模式）提供的特性：
浏览器调试工具
注释，开发阶段的详细错误日志和提示
快速和优化的增量构建机制
针对production（生产模式）提供的特性：
开启所有的优化代码
更小的bundle大小
去除掉只在开发阶段运行的代码
Scope hoisting（把多个bundle放进一个大的闭包里，加快整个代码的运行速度）和Tree-shaking（没有被使用到的模块给去除掉）
2. 插件和优化
删除了CommonsChunkPlugin插件
它使用内置API optimization.splitChunks和optimization.runtimeChunk，意味着webpack会默认为你生成共享的代码块
其他插件的变化：
3. 开箱即用WebAssembly
这会带来运行时性能的大幅度提升
可以直接对本地的wasm模块进行import或者export操作，也可以通过编写loaders来直接import C++，C或Rust
4. 支持多种模块类型（5种）
5. 0CJS
含义是0配置，不再强制使用webpack.config.js作为打包的入口配置文件
它默认的入口为'./src/'和默认出口'./dist'，对小项目来说是福音
但它仍然有着高度可配置性，可以很好满足你的需求
6. 新的插件系统
提供了针对插件和钩子的新API
变化如下：
注：当使用webpack4时，确保使用Node.js的版本要为8.9.4以上
安装webpack
在cmd输入命令：npm install webpack-cli -g （建议不要全局安装）
若想要使用webpack4+版本，你还需要安装webpack-cli：npm install --save-dev webpack-cli
webpack的基本使用
打包命令：webpack --mode development/production 输入文件.js -o 输出文件.js
webpack---入口出口配置文件
配置文件webpack.config.js：
const path=require('path');
//一个文件打包时的配置
module.exports={
entry:'输入文件名字',
output:{
path:path.resolve(__dirname,'dist'), //输出文件的目录路径
filename:'输出文件名字'
},
mode:'production/development'
}
//多个文件打包时的配置
module.exports={
entry:{ //多个文件时
xxx:'输入文件1',
xxxx:'输入文件2',
...
},
output:{
path:path.resolve(__dirname,'dist'), //输出文件的目录路径
filename:'[name].xxx.js' //动态的输出文件名
},
mode:'production/development', //模式
module:{}, //模块：如解析CSS，图片如何转换，压缩
plugins:[], //插件：用于生产模块和各项功能
}
打开cmd并进入到存放webpack.config.js的目录下，输入命令 webpack 即可进行打包
webpack---加载器url-loader
作用：当某个文件大小小于某个指定size时，会自动转换成DataURL形式（默认为base64）
安装：npm install url-loader --save-dev
webpack.config.js文件配置：
module.exports = {
module: {
rules: [
{
test: /.(png|jpg|gif)$/i, //匹配的图片形式
use: [
{
loader: 'url-loader',
options: {
limit: 8192, //指定size，当小于此size，就会自动转换成DataURL形式（若指定size，可取值false）
encoding：指定的编码形式
},
},
],
},
],
},
};
webpack---加载器babel-loader
作用：把es6，es7...代码转换成能在浏览器运行的es5代码
安装：npm install -D babel-loader @babel/core @babel/preset-env webpack
webpack.config.js文件配置：
module.exports = {
module: {
rules: [
{
test: /.m?js$/, //匹配的文件扩展名
exclude: /(node_modules|bower_components)/, //排除掉的文件夹
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'], //转换的规则
plugin：[] //配置相关的插件
}
}
}
]
}
}
webpack---加载器sass-loader
作用：加载 Sass/SCSS 文件并将他们编译为CSS
安装：npm install sass-loader sass webpack --save-dev
（sass-loader需要预先安装Dart Sass或Node Sass。这可以控制所有依赖的版本， 并自由的选择使用的 Sass 实现。）
webpack.config.js文件配置：
module.exports = {
module: {
rules: [
{
test: /.s[ac]ss$/i, //匹配sass/scss文件
use: [ //顺便安装以下用到的模块
"style-loader", // 将JS字符串生成为style节点（用来处理css文件中的url()等，把url挂载到js中）
"css-loader", // 将CSS转化成CommonJS模块（将css插入到页面的style标签）
"sass-loader", // 将Sass编译成CSS
],
},
],
},
};
webpack---关于插件MiniCssExtractPlugin
作用：将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载
安装：npm install --save-dev mini-css-extract-plugin
webpack.config.js文件配置：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [new MiniCssExtractPlugin({filename:xxx（决定了输出的每个 CSS 文件的名称），chunkFilename:xxx（决定了非入口的 chunk 文件名称），...})],
module: {
rules: [
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
此插件与sass-loader联用时，webpack.config.js文件的配置：
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /.s[ac]ss$/i,
use: [
process.env.NODE_ENV !== "production" ? "style-loader": MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
],
},
plugins: [new MiniCssExtractPlugin({filename: "[name].css", chunkFilename: "[id].css",...})],
};
webpack---关于插件DefinePlugin
作用：允许在编译时创建配置的全局常量，避免代码的冗余，增加灵活性
这在需要区分开发模式与生产模式进行不同的操作时，非常有用
使用：
var webpack=require('webpack');
new webpack.DefinePlugin({对应的常量：对应的值});
webpack---关于插件HtmlWebpackPlugin
作用：简化了HTML文件的创建，以便为你的webpack包提供服务（HTML文件打包）
这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用
你可以让该插件为你生成一个HTML文件，使用lodash模板提供模板，或者使用你自己的loader
安装：npm install --save-dev html-webpack-plugin
webpack.config.js文件配置：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: '入口文件名',
output: {
path: path.resolve(__dirname, './dist'),
filename: '出口文件名',
},
plugins: [new HtmlWebpackPlugin({
title:'xxxx', //
filename:'xxx.html', //生成（输出）的html文件名
template：'xx.html' //输入的html文件（可直接在其文件下编写<% htmlWebpackPlugin.options.title%>来引用到title）
})],
};
这将会把xx.html生成一个包含以下内容的 dist/xxx.html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>xxxx</title>
</head>
<body>
<script src="出口文件名"></script>
</body>
</html>
在多个HTML页面打包的情况下：
webpack---热替换
需要用到插件：webpack-dev-server
作用：会实时更新服务器显示的内容
安装：npm install webpack-dev-server -D
webpack.config.js文件配置：
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'), //目标文件所在目录
compress: true, //是否启用 gzip压缩
port: 9000, //目标端口
hot：true //是否热替换（实时更新）（webpack4可以不用说明此属性配置）
},
};
在package.json文件配置中：
"scripts":{"start"："webpack-dev-server"}
webpack---CSS3前缀
webpack---图片在HTML和CSS中的打包
CSS中图片打包：
HTML中图片打包：
webpack---清除未使用的CSS
webpack---打包注释
new webpack.BannerPlugin('xxxx（注释）')
webpack---入口文件模块化的配置
webpack---开发环境与生产环境
devDependencies（开发环境）存放测试代码依赖的包或构建工具的包
dependencies（生产环境）存放项目或组件代码中依赖到的包
安装全部项目依赖包：npm install
安装生产环境依赖包：npm install --production
webpack---资源拷贝
对一些开发技术文档可直接进行拷贝