处理less文件
运行
npm i less-loader@10.0.1 less@4.1.1 -D
在webpack.confing.js文件中的module->rules数组中添加：
module: { rules:[ {test:/\.css$/, use:['style-loader', 'css-loader']}, {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']} ] }
处理url路径相关的文件
npm i url-loader@4.1.1 file-loader@6.2.0 -D
js给img标签导入图片
<!-- 需求：把 /src/images/01.jpg 设置给src属性 --> <img src="" alt="" class="box"
// 导入图片，得到图片文件 import i from './images/01.jpg' // 给img标签的src动态赋值 $('.box').attr( 'src', i )
补充：小图片适合转成base64，大图片不合适，转成base64图片体积会变大
打包处理js文件中的高级语法：
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
//导入html-webpack-plugin插件 得到插件的构造函数 const HtmlPlugin = require('html-webpack-plugin') // new构造函数创建插件的实例对象 const htmlPlugin = new HtmlPlugin({ // 指定要复制哪个页面 template: './src/index.html', // 指定复制出来的文件名和存放路径 filename: './index.html' }) // 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { // 代表webpack运行的模式，可选值有两个development和production mode: 'development', // 插件的数组 将来webpack在运行时会加载并调用这些插件 plugins: [htmlPlugin], devServer: { // 首次打包成功后自动打开浏览器 open:true, // 在http协议中如果端口号为80可以省略 port:8080, // 指定主机运行的地址 host:'127.0.0.1' }, module: { rules:[ {test:/\.css$/, use:['style-loader', 'css-loader']}, {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']}, // 处理图片文件的loader // 如果需要调用的loader只有一个，则只传递一个字符串就行，如果有多个loader则必须指定数组 { test:/\.jpg|png|gif$/, use: 'url-loader?limit=22229' }, // 使用babel-loader处理高级的js语法 // 注意：必须使用exclude排除指定项；因为node_modules目录下的第三方包不需要被打包 {test:/\.js$/, use: 'babel-loader', exclude: /node_modules/} ] } }
module.exports = { // 声明babel可用插件 plugins: [['@babel/plugin-proposal-decorators', {legacy:true}]]
发布
优化打包后文件的存储路径：
建议写法：
module: { rules:[ {test:/\.css$/, use:['style-loader', 'css-loader']}, {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']}, // 处理图片文件的loader // 如果需要调用的loader只有一个，则只传递一个字符串就行，如果有多个loader则必须指定数组 { test:/\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images' }, // 使用babel-loader处理高级的js语法 // 注意：必须使用exclude排除指定项；因为node_modules目录下的第三方包不需要被打包 {test:/\.js$/, use: 'babel-loader', exclude: /node_modules/} ] }
打包时清理旧文件：
可以搜索对应插件，根据文档可以自行安装插件
Source Map
Source Map 可以在报错时提示对应的源文件的行号，便于定位错误位置修改错误
补充：文件后缀为 .map 为Source Map文件，文件中记录了源码对应的行号信息
package.json:
"scripts": { "dev": "webpack serve", "build": "webpack --mode production" },
webpack.config.js:
// 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { // devtool: 'eval-source-map', devtool: 'nosources-source-map', // 代表webpack运行的模式，可选值有两个development和production mode: 'development', entry: path.join(__dirname, './src/index.js'), output: { path: path.join(__dirname, 'dist'), filename: 'js/main.js' }, // 插件的数组 将来webpack在运行时会加载并调用这些插件 plugins: [htmlPlugin,new CleanWebpackPlugin()], devServer: { // 首次打包成功后自动打开浏览器 open:true, // 在http协议中如果端口号为80可以省略 port:8080, // 指定主机运行的地址 host:'127.0.0.1' }, module: { rules:[ {test:/\.css$/, use:['style-loader', 'css-loader']}, {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']}, // 处理图片文件的loader // 如果需要调用的loader只有一个，则只传递一个字符串就行，如果有多个loader则必须指定数组 { test:/\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images' }, // 使用babel-loader处理高级的js语法 // 注意：必须使用exclude排除指定项；因为node_modules目录下的第三方包不需要被打包 {test:/\.js$/, use: 'babel-loader', exclude: /node_modules/} ] } }
实际开发中不需要自己配置webpack，有CLI一键生成带有webpack的项目
使用@代替./ …/
@代表src源代码目录
使用@从src开始向内查找
使用./ …/ 从当前文件向外查找
配置
webpack.config.js文件
const path = require('path') //导入html-webpack-plugin插件 得到插件的构造函数 const HtmlPlugin = require('html-webpack-plugin') // new构造函数创建插件的实例对象 const htmlPlugin = new HtmlPlugin({ // 指定要复制哪个页面 template: './src/index.html', // 指定复制出来的文件名和存放路径 filename: './index.html' }) const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { // devtool: 'eval-source-map', devtool: 'nosources-source-map', // 代表webpack运行的模式，可选值有两个development和production mode: 'development', entry: path.join(__dirname, './src/index.js'), output: { path: path.join(__dirname, 'dist'), filename: 'js/main.js' }, // 插件的数组 将来webpack在运行时会加载并调用这些插件 plugins: [htmlPlugin,new CleanWebpackPlugin()], devServer: { // 首次打包成功后自动打开浏览器 open:true, // 在http协议中如果端口号为80可以省略 port:8080, // 指定主机运行的地址 host:'127.0.0.1' }, module: { rules:[ {test:/\.css$/, use:['style-loader', 'css-loader']}, {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']}, // 处理图片文件的loader // 如果需要调用的loader只有一个，则只传递一个字符串就行，如果有多个loader则必须指定数组 { test:/\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images' }, // 使用babel-loader处理高级的js语法 // 注意：必须使用exclude排除指定项；因为node_modules目录下的第三方包不需要被打包 {test:/\.js$/, use: 'babel-loader', exclude: /node_modules/} ] }, resolve: { alias: { //告诉webpack @代表src这一层目录 '@' : path.join(__dirname, './src/') } } }
