一、在mac上面安装webpack
命令：npm install webpack webpack-cli --save-dev
报错：command not found: webpack
原因：当前环境变量中，没有找到对应的命令
解决办法：➜ echo 'export PATH="./node_modules/.bin:$PATH"' >> ~/.zshrc ➜ source ~/.zshrc
二、webpack配置
1、新建一个webpack.config.js文件
const path = require('path')
module.exports = {
entry:'./src/index.js',
output:{
filename:'build.js',
path:path.resolve(__dirname,'dist')
}
}
其中entry指定打包的入口文件
output指定打包的出口文件,filename是文件名，path是输出文件的路径
三、css-loader 用来处理js文件中倒入的css文件
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
注意：必须使用两个加载器来转换CSS文件。CSS-loader用来读取CSS文件来转换，另一个Style-loader用来往HTML中插入<style>标签
四、less-loader
对于less文件，需要less-loader来处理，将其转换成css，再交给css-loader处理
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
}
五、sass-loader 对于sass文件，需要sass-loader搭配node-sass/dart-sass来处理，将其转换成css，再交给css-loader处理
{
test: /.s[ac]ss$/i,
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
六、browserslist browserslist 是在不同的前端工具之间共用目标浏览器和 node 版本的配置工具，说白了就是告诉工具需要适配哪些浏览器
1）可以在package.json中增加如下配置
"browserslis":[
"last 2 version",
"> 1%",
"no dead"
]
2）或者可以在根目录下新建.browserslistrc配置文件
>1%
last 2 version
七、postcss：是一个用JavaScript转换css的工具，配合browserslist使用
比如其中一有一个插件Autoprefixer，给样式加上支持浏览器厂商前缀
1）在webpack.config.js中配置
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
},
},
"postcss-loader",
],
},
说明：其中importLoaders指的是对于css文件中通过import方式导入的文件，允许你用多少个loader进行处理，在这配置的是1，说明使用postcss-loader来处理import方式导入的文件。
2）在postcss.config.js文件中配置处理导入文件的插件
module.exports = {
plugins:[
require('postcss-preset-env')
]
}
说明：其中postcss-preset-env集成了所有的插件
3）在.browserslistrc文件中配置匹配的规则
>1%
last 2 version
一般的使用流程：less-loader/sass-loader——>postcss-loader———>css-loader
八、file-loader：用来处理文件（如图片）
{
test: /\.(png|svg|gif|jpe?g)$/,
use: ["file-loader"],
}
对于img标签src中引入的图片：
1）使用 require 导入图片，此时如果不配置 esModule: false ，则需.default 导出
2）也可以在配置当中设置 esModule: false
{
test: /\.(png|svg|gif|jpe?g)$/,
use: [{
loader:"file-loader",
options:{
esModule: false // 不转为 esModule
}
}],
},
3）采用 import xxx from 图片资源，此时可以直接使用 xxx
// 采用 import xxx from 图片资源，此时可以直接使用 xxx
import oImgSrc from '../img/01.wb.png'
/*
1）使用 require 导入图片，此时如果不配置 esModule: false ，则需.default 导出
2）也可以在配置当中设置 esModule: false
3）采用 import xxx from 图片资源，此时可以直接使用 xxx
*/
function packImg(){
// 01 创建一个容器
const oEle = document.createElement('div')
// 02 创建 img 标签，设置 src 属性
const oImg = document.createElement('img');
oImg.width=600;
// 使用 require 导入图片，此时如果不配置 esModule: false ，则需.default 导出
// oImg.src = require('../img/01.wb.png').default
// 也可以在配置当中设置 esModule: false
// oImg.src = require('../img/01.wb.png')
oImg.src = oImgSrc
oEle.appendChild(oImg)
return oEle
}
document.body.appendChild(packImg())
九、file-loader配置
如果不对file-loader进行配置，则默认生成hash形式的文件，如：87a1fe41f919c33aebe8449df8749712.png
配置项如下：
1、name：输出文件的名称，例如 name: 'img/[name].[hash:6].[ext]' 2、outputPath：输出文件的路径，相当直接在name前加上的img
