'css-loader' ,//将css资源编译成commonjs的模块到js中
],
},
{
test: /.less$/,
//loader：'xxx', //只能使用1个loader
use: [
'style-loader', //将js中css通过创建style标签添加到html文件中生效
'css-loader' ,//将css资源编译成commonjs的模块到js中
'less-loader', //将less编译成css文件
],
}
]
},
//插件
plugins:[
//plugin的配置
].
//模式
mode:"development",
};
三、处理图片资源
=========
const path=require("path") //nodejs核心模块
module.exports={
//入口
entry:"./src/main.js", //相对路径
//输出
output:{
//文件的输出路径
//__dirname nodejs的变量，代表当前文件的文件夹目录
path:"path.resolve(__dirname,"dist")", //绝对路径
//文件名
filename:"main.js",
},
//加载器
module: {
rules: [
// loader的配置
{
test: /.css$/, //只检测.css的文件
use: [ //执行顺序：从右到左（从下到上）从css-loader开始执行，然后执行style-loader
'style-loader', //将js中css通过创建style标签添加到html文件中生效
'css-loader' ,//将css资源编译成commonjs的模块到js中
],
},
{
test: /.less$/,
//loader：'xxx', //只能使用1个loader
use: [
'style-loader', //将js中css通过创建style标签添加到html文件中生效
'css-loader' ,//将css资源编译成commonjs的模块到js中
'less-loader', //将less编译成css文件
],
},
//处理图片资源
{
test: /.(png|jpe?g|gif|webp|svg)$/,
type:"asset",
parser:{
dataUrlCondition:{
//小于10kb的图片转base64
//优点：减少请求数量 缺点：体积会更大
maxSize:10 * 1024 , //10kb
}
}
},
]
},
//插件
plugins:[
//plugin的配置
].
//模式
mode:"development",
};
四、修改输出文件目录
===========
如果都把文件输出到一个dist文件夹，会很乱。
我们可以给打包的文件分类，js文件去专门的js文件夹。如下：
output:{
//文件的输出路径
//__dirname nodejs的变量，代表当前文件的文件夹目录
path:"path.resolve(__dirname,"dist")", //绝对路径
//入口文件导报输出文件名
filename:"js/main.js",
},
图片的保存路径：
{
test: /.(png|jpe?g|gif|webp|svg)$/,
type:"asset",
parser:{
dataUrlCondition:{
//小于10kb的图片转base64
//优点：减少请求数量 缺点：体积会更大
maxSize:10 * 1024 , //10kb
}
},
generator:{
//输出图片名称
//hash是图片的hash值名称,冒号后面的数字为hash值截取的位数，ext是扩展名
filename:"static/image/[hash:10][ext][query]",
}
},
五、处理字体图标资源
===========
一般是阿里图标库里的字体和图标的资源
{
test: /.(ttf|woff2?)$/,
type:"asset/resource",
generator:{
//输出名称
//hash是图片的hash值名称,冒号后面的数字为hash值截取的位数，ext是扩展名
filename:"static/media/[hash:10][ext][query]",
}
},
六、处理其他资源
=========
当有新资源如mp3,mp4等格式时，就在文件类型那里加上资源的类型就行。
{
test: /.(ttf|woff2?|mp3|mp4|avi|)$/,
type:"asset/resource",
generator:{
//输出名称
//hash是图片的hash值名称,冒号后面的数字为hash值截取的位数，ext是扩展名
filename:"static/media/[hash:10][ext][query]",
}
},
七、处理js资源
=========
1、ESlint（plugin）
可组装的JavaScript和JSX检查工具，就是来检测JavaScript和JSX语法的工具，可以配置各项功能。EslintWebpackPlugin | webpack 中文文档
首先，需要安装 eslint-webpack-plugin：
npm install eslint-webpack-plugin --save-dev
注意: 如果未安装 eslint >= 7 ，你还需先通过 npm 安装：
npm install eslint --save-dev
然后把插件添加到你的 webpack 配置。例如：
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
// ...
plugins: [
new ESLintPlugin({
//检测哪些文件
context:path.resolve(__dirname,"src"),
})
],
// ...
};
然后需要新建一个.eslintrc.js文件
内容如下：
module.exports={
//继承eslint规则
extends:["eslint:recommended"],
env:{ //环境变量
node:true,//启用node中全局变量
browser:true,//启用浏览器中全局变量
},
parsetOptions:{ //语法规则
ecmaVersion:6, //es6
sourceType:"module", //es module
},
rules:{
"no-var":2, //不能用var定义变量
}
}
但是有时候会对打包的其他资源产生报错，再新建一个.eslintignore
忽视dist文件
2、Babel（loader）
主要用于将ES6语法编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境。
安装：
webpack 4.x | babel-loader 8.x | babel 7.x
npm install -D babel-loader @babel/core @babel/preset-env webpack
用法：
webpack 文档：Loaders
在 webpack 配置对象中，需要将 babel-loader 添加到 module 列表中，就像下面这样：
module: {
rules: [
{
test: /.m?js$/,
exclude: /(node_modules|bower_components)/, //排除这些文件中的js文件（这些文件不处理）
use: {
loader: 'babel-loader',
//options: {
// presets: ['@babel/preset-env']
//}
}
}
]
}
Babel的配置（options）也可以单独写，方便修改，如果在外面写就要新建文件babel.config.js
module.exports={
//智能预设，能够编译es6的语法
presets: ['@babel/preset-env'],
}
八、处理html资源
===========
安装：
npm install --save-dev html-webpack-plugin
基本用法：
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中，如下所示：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js',
},
最后
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析
虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！ 开源分享：docs.qq.com/doc/DSmRnRG…
