目录
二、webpack的配置文件—webpack.config.js
一、webpack的默认打包
在目录下直接执行 webpack 命令，然后就会生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件。当我们运行webpack时，webpack会查找当前目录下的 src/index.js作为入口。
webpack我们也可以通过配置来指定入口和出口：
npx webpack --entry ./src/main.js --output-path ./build二、webpack的配置文件—webpack.config.js
在通常情况下，webpack需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然是不可以的。在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件：
const path = require('path')
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
// 必须为绝对路径
path: path.resolve(__dirname, "./build") // __dirname为当前文件所在的目录的绝对路径
}
}三、指定配置文件
如果我们的配置文件并不是webpack.config.js的名字，比如我们将webpack.config.js修改成了 wk.config.js，个时候我们可以通过 --config 来指定对应的配置文件：
webpack --config wk.config.js四、webpack的依赖图
如果我们的配置文件并不是webpack.config.js的名字，比如我们将webpack.config.js修改成了 wk.config.js，个时候我们可以通过 --config 来指定对应的配置文件：
五、loader的使用
1.使用场景
问题：当我们想要给一些元素添加样式文件，我们创建了一个css文件，并在需要用到的地方进行引入，这时这个css文件已产生依赖。但我们在打包的时候会发生报错。
上面的错误信息告诉我们需要一个loader来加载这个css文件。
loader是用于对模块的源代码进行转换，在加载css这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能。
2.使用方案
- 内联方式（在引入的样式前加上使用的loader，并且使用!分割）
import "css-loader!../css/index.css";-
配置方式
3.配置方式
module.rules中允许我们配置多个loader,这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览。
module.rules的配置如下：
-
rules属性对应的值是一个数组：[Rule]
-
数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性：
-
test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式；
-
use属性：对应的值时一个数组：[UseEntry]
-
UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
-
loader：必须有一个 loader属性，对应的值是一个字符串；
-
options：可选的属性，值是一个字符串或者对象，值会被传入到loader中；
-
query：目前已经使用options来替代；
-
-
传递字符串（如：use: [ 'style-loader' ]）是 loader 属性的简写方式（如：use: [ { loader: 'style-loader'} ]）；
-
-
loader属性： Rule.use: [ { loader } ] 的简写。
-
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
// 必须为绝对路径
path: path.resolve(__dirname, "./build") // __dirname为当前文件所在的目录的绝对路径
},
module: {
rules: [
{
// 正则表达式
test: /\.css$/, // 对资源进行匹配
use: [ // loader的执行顺序是从下到上，从右到左
{loader: "style-loader"}
{loader: "css-loader"} // 写法一
],
// use: ["style-loader", "css-loader"] // 写法二
// loader: "css-loader" // 写法三
}
]
}
}4.常用的loader
4.1 css-loader
作用：负责将.css文件进行解析
局部安装
npm install -D css-loader补充：css-loader的importLoaders属性
{
test: /\.css$/, // 匹配资源
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1 // 数量表示前面有多少个loader需要运行
}
},
"postcss-loader"
],
},4.2 style-loader
作用：插入style的操作
npm install -D style-loader4.3 less-loader
作用：自动使用less工具转换less到css
npm install less-loader -D六、browserslist工具
问题：现在有一个问题，我们如何可以在css兼容性和js兼容性下共享我们配置的兼容性条件呢？
回答：我们是通过工具来达到这种兼容性的，例如postcss-prest-env、babel、autoprefixer。
Browserslist是什么?
Browserslist是一个在不同的前端工具之间，共享目标浏览器和Node.js版本的配置
1.浏览器查询过程
这些工具会根据我们的配置来获取相关的浏览器信息，以方便决定是否需要进行兼容性的支持。条件查询使用的是caniuse-lite的工具，这个工具的数据来自于caniuse的网站上。
2.Browserslist编写规则
3.Browserslist的使用
3.1 命令行使用browserslist
我们可以直接通过命令来查询某些条件所匹配到的浏览器：
npx browserslist ">1%, last 2 version, not dead"3.2 配置browserslist
-
方案一：package.json配置：
- 方案二：.browserslistrc文件
4.默认配置和条件关系
如果没有配置，那么也会有一个默认配置：
我们编写了多个条件之后，多个条件之间是什么关系呢？
七、PostCSS工具
1.定义
PostCSS是一个通过JavaScript来转换样式的工具，这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置，但是实现这些工具，我们需要借助于PostCSS对应的插件
2.使用
-
第一步：查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader；
-
第二步：选择可以添加需要的PostCSS相关的插件；
2.1 在命令行使用
如果要在命令行中使用，我们需要单独安装一个工具postcss-cli
npm install -D postcss postcss-cli如果我们需要编写一个添加前缀的css，那么需要再安装一个autoprefixer插件
npm install -D autoprefixer直接使用postcss工具，并且指定使用autoprefixer
npx postcss --use autoprefixer -o result.css ./src/css/style.css上面的命令行语句的意思就是使用postcss，并指定是autoprefixer插件，然后将指定目录下的css文件转化（./src/css/style.css），并输出为转化后目标文件（result.css）
2.2 在webpack单独使用
真实开发中我们必然不会直接使用命令行工具来对css进行处理，而是可以借助于构建工具，在webpack中使用postcss就是使用postcss-loader来处理的。
npm install -D postcss-loader{
// 正则表达式
test: /\.css$/, // 对资源进行匹配
use: [
{loader: "css-loader"},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
require('autoprefixer')
]
}
}
}
],
}注意：因为postcss需要有对应的插件才会起效果，所以我们需要配置它的plugin；
2.2.1 单独的postcss配置文件
postcss-preset-env插件
在配置postcss-loader时，我们配置插件并不需要使用autoprefixer，我们可以使用另外一个插件：postcss-preset-env，它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfil，也包括会自动帮助我们添加autoprefixer。
npm install -D postcss-preset-env我们也可以将这些配置信息放到一个单独的文件中进行管理：
在根目录下创建postcss.config.js
八、plugin的使用
1.官网描述
While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.
翻译：Loader是用于特定的模块类型进行转换，Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等。
2.常用的plugin
2.1 CleanWebpackPlugin
每次修改了一些配置，重新打包时，都需要手动删除dist文件夹，现在我们CleanWebpackPlugin插件帮我们自动删除。
配置：
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}2.2 HtmlWebpackPlugin
如果我们想要打包文件自动生成入口文件index.html，那么可以使用HtmlWebpackPlugin插件。
配置：
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title："webpack test"
})
]
}生成index.html文件的过程：在html-webpack-plugin的源码中，有一个default_index.ejs模块，默认情况下是根据ejs的一个模板来生成的。如果我们想在自己的模块中加入一些比较特别的内容，比如添加一个noscript标签，在用户的JavaScript被关闭时，给予响应的提示，比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签 <div id="app"></div>，我们可以设置一个自己的index.html模版。
比如vue里的html模版：
配置：
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title："webpack test",
template: "./public/index.html" // 指定某个目录下的某个文件作为模版html
})
]
}但是，这个时候编译还是会报错，因为在我们的模块中还使用到一个BASE_URL的常量，在编译template模块时，有一个BASE_URL：<link rel="icon" href="<%= BASE_URL %>favicon.ico">；我们没有设置这个常量值，所以抛出这个错误，这是我们可以使用插件DefinePlugin。
2.3 DefinePlugin
DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）
配置：
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {DefinePlugin} = require('webpack')
module.exports = {
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title："webpack test",
template: "./public/index.html" // 指定某个目录下的某个文件作为模版html
}),
new DefinePlugin({
BASE_URL: '"./"' // 注意是一个字符串的形式赋值给BASE_URL，例如 const BASE_URL = "./"
})
]
}2.4 CopyWebpackPlugin
在vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中，这个复制的功能，我们可以使用CopyWebpackPlugin来完成。
配置：
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {DefinePlugin} = require('webpack')
const CopyWebpackPlugin = require('copy-webpacklugin')
module.exports = {
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title："webpack test",
template: "./public/index.html" // 指定某个目录下的某个文件作为模版html
}),
new DefinePlugin({
BASE_URL: '"./"' // 注意是一个字符串的形式赋值给BASE_URL，例如 const BASE_URL = "./"
})
new CopyWebpackPlugin({
patterns: [
{
from: "public",
globOptions: { // 复制的规则在patterns中设置
ignore: [ // 忽略某些文件，不被复制
'**/index.html',
'**/DS_Store' // mac目录下回自动生成的一个文件
]
}
}
]
})
]
}
扫一扫
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
