webpack打包笔记

一只飞鱼呀

于 2023-07-01 20:17:14 发布

阅读量140

点赞数

文章标签： webpack 笔记前端

本文链接：https://blog.csdn.net/weixin_56056054/article/details/131494275

版权

webpack打包

打包bundle:webpack可以帮助我们打包所以它是一个打包工具
静态的static:这样表达的原因是我们最终可以将代码打包成最终的静态资源(部署到服务器)
模块化module:webpack默认支持各种模块开发
现代的modern

创建全局的webpack

创建 npm init -y

再使用命令:npm install webpack webpack-cli -D
打包命令:npx webpack

=====================================================================================================

如果命名的是main.js(二个文件都命名为main.js),去打包就要用 npx webpack --entry ./src/main.js(自己指定入口)

改变打包的文件名使用命令 npx webpack --entry ./src/main.js --output-filename bundle.js

改变打包的文件夹的名字使用命令 npx webpack --entry ./src/main.js --output-filename bundle.js --output-path ./bulid

===================================================================================================== ---以上太麻烦了--------

解决方法: 在src下创建 webpack.config.js文件

在跟目录里面创建一个webpack.config.js文件 const path = require('path');
module.exports = { entry:"./src/main.js", //入口 output:{ //出口 filename:"bundle.js", path:path.resolve(__dirname,"./bulid") }
}

如果把webpack.config.js这个配置文件进行改名则执行打包要用(npx webpack --config 被改的文件名.config.js)

=====================================================================================================

快捷执行(把webpack.config.js文件放入 package.json中 ---然后输入命令 npm run bundle进行执行)

package.js文件的scripts放入webpack.config.js文件

{

"name": "webpack_basic", "version": "1.0.0", "description": "", "main": "index.js",

"scripts": {
- "build":"webpack --config webpack.config.js"
}, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^5.86.0", "webpack-cli": "^5.1.4" }

}

然后打包用命令 npm run bulid

创建局部的webpack

第一步:创建package.js文件用于管理项目的信息库的依赖 npm init
第二步:安装局部的webpack npm install webpack webpack-cli -D
第三步:使用局部的webpack npx webpack
第四步:创建webpack.config.js文件 const path = require('path') //导出信息 module.exports = { entry:"./src/main.js", output:{ filename:"bundle.js", path:path.resolve(__dirname,"./dist") } }
第四步:在package.json中创建script脚本执行脚本打包即可 "script":{ "build":"webpack" }
执行打包 : npm run build

webpack --loader(打包css文件)

安装命令: npm install css-loader -D
第一步:在src/创建一个文件夹(component/ div_cpn.js写入代码:)
import "../css/div_style.css"

const divEl = document.createElement("div") //添加css divEl.textContent = "Hello word" divEl.classList.add("content")

document.body.append(divEl)

第二步:把上面写的导入到main.js中
import { sum } from "./utils/main.js" import "./component/div_cpn.js" //引入js 入口文件 console.log(sum(10 , 20))

const result = () => { console.log("你好呀!!!") }

result()
第三步:在webpack.config.js里面配置css-loader const path = require('path'); module.exports = { entry:"./src/main.js", //入口 output:{ //出口 filename:"bundle.js", path:path.resolve(__dirname,"./bulid") },
module:{ rules:[ //匹配规则 { //告诉webpack匹配什么文件 test:/.css$/, use:[ { loader:"css-loader" } ] } ]
} }

npm run build 发现没有效果

解决办法:安装指令 : npm install style-loader -D 在配置: const path = require('path'); module.exports = { entry:"./src/main.js", //入口 output:{ //出口 filename:"bundle.js", path:path.resolve(__dirname,"./bulid") }, module:{ rules:[ //匹配规则 { //告诉webpack匹配什么文件 test:/.css$/,
use:[ //执行顺序是从后前的
{ loader:"style-loader" },
{ loader:"css-loader" } ] } ] } }

在执行打包文件: npm run build

===================================================================================================== 如何处理less

安装命令: npm install less-loader -D
第一步:在src/css里创建title_style.less文件写入代码: @fontSize:50px; @fontColor:blue;

.title { font-size: @fontSize; color:@fontColor; }

第二步:引入到 div_cpn.js中 import "../css/div_style.css" import "../css/title_style.css" //引入less文件

const divEl = document.createElement("div") //添加css divEl.textContent = "Hello word" divEl.classList.add("content")

document.body.append(divEl)

//创建h2元素 const titleEl = document.createElement("h2") titleEl.textContent = "呵呵呵呵"

titleEl.classList.add("title") document.body.append(titleEl)

第三步:在webpack.config.js里面配置less文件 const path = require('path'); module.exports = { entry:"./src/main.js", //入口 output:{ //出口 filename:"bundle.js", path:path.resolve(__dirname,"./bulid") }, module:{ rules:[ //匹配规则 { //告诉webpack匹配什么文件 test:/.css$/, use:[ //执行顺序是从后前的 { loader:"style-loader" }, { loader:"css-loader" } ] }, //处理less文件
{ test:/.less$/, // use:[ // { loader:"style-loader" }, // { loader:"less-loader" } // ] //简写 use:["style-loader" , "css-loader" , "less-loader"]
} ] } }

=====================================================================================================

postcss-loader 解决一些样式要添加浏览器前缀的问题

安装指令: npm install postcss-loader -D
在安装:npm install autoprefixer -D

在webpack.config.js中配置如下: const path = require('path'); module.exports = { entry:"./src/main.js", //入口 output:{ //出口 filename:"bundle.js", path:path.resolve(__dirname,"./bulid") }, module:{ rules:[ //匹配规则 { //告诉webpack匹配什么文件 test:/.css$/, use:[ //执行顺序是从后前的 { loader:"style-loader" }, { loader:"css-loader" } ,

{ loader:"postcss-loader", options:{ postcssOptions:{ plugins:[ "autoprefixer" ]
```
   }
```
} } ]
}, //处理less文件 { test:/.less$/, // use:[ // { loader:"style-loader" }, // { loader:"less-loader" } // ] //简写 use:["style-loader" , "css-loader" , "less-loader"] } ] } }

对postcss-loader进行抽离

第一步:在src下创建:一个文件 postcss.config.js module.exports = { plugins:[ "autoprefixer" ] }

第二步:在webpack下写入 const path = require('path'); module.exports = { entry:"./src/main.js", //入口 output:{ //出口 filename:"bundle.js", path:path.resolve(__dirname,"./bulid") }, module:{ rules:[ //匹配规则 { //告诉webpack匹配什么文件 test:/.css$/, use:[ //执行顺序是从后前的 { loader:"style-loader" }, { loader:"css-loader" } ,

{ loader:"postcss-loader"} ---->简写 // { // loader:"postcss-loader", // options:{ // postcssOptions:{ // plugins:[ // "autoprefixer" // ] // } // } // } ] }, //处理less文件 { test:/.less$/, // use:[ // { loader:"style-loader" }, // { loader:"less-loader" } // ] //简写 use:["style-loader" , "css-loader" , "less-loader"] } ] } }

在npm run build 打包

postcss-preset-env 预设插件

使用这个卸载掉 autoprefiexer(使用命令: npm uninstall autoprefixer)

安装另外一个新的插件: 命令: npm install postcss-preset-env -D
修改配置 postcss.config.js module.exports = { plugins:[ "postcss-preset-env" ] }

=====================================================================================================

打包图片

代码(div_cpn.js) import "../css/div_style.css" import "../css/title_style.css" //引入less文件 //引入图片模块 import tq from "../img/t1.png" const divEl = document.createElement("div") //添加css divEl.textContent = "Hello word" divEl.classList.add("content")

document.body.append(divEl)

//创建h2元素 const titleEl = document.createElement("h2") titleEl.textContent = "呵呵呵呵"

titleEl.classList.add("title") document.body.append(titleEl)

//创建img元素 const imgEl = document.createElement("img") imgEl.src = tq

document.body.append(imgEl)
执行 npm run build 报错

解决方法在webpack.config.js里面配置处理图片的loader

const path = require('path'); module.exports = { entry:"./src/main.js", //入口 output:{ //出口 filename:"bundle.js", path:path.resolve(__dirname,"./bulid") }, module:{ rules:[ //匹配规则 { //告诉webpack匹配什么文件 test:/.css$/, use:[ //执行顺序是从后前的 { loader:"style-loader" }, { loader:"css-loader" } , { loader:"postcss-loader"} // { // loader:"postcss-loader", // options:{ // postcssOptions:{ // plugins:[ // "autoprefixer" // ]

            //         }
            //     }
            // }
        ]
      },
      //处理less文件
      {
         test:/\.less$/,
        //  use:[
        //     { loader:"style-loader" },
        //     { loader:"less-loader" }
        //  ]
        //简写
        use:["style-loader" , "css-loader" , "less-loader" , "postcss-loader"]
      },

// 处理图片文件 { test:/.(png|jpe?g|svg|gif)$/, type:"asset"
} ] } }

引入知识点:

-- 资源模块类型(assent module type),通过添加4种新的模块类型来替代所有的这些 loader 1.assent/resource 发送一个单独的文件并导出URL -老版本之前是用file-loader来实现 2.asset/inline 导出一个资源data URL -老版本之前是用url-loader来实现 3.assent/source 导出资源的源代码 -老版本之前是用raw-loader来实现 4.assent 在导出一个data url 和发送一个单独文件之间自动选择 -老版本之前是用url-loader来实现

=====================================================================================================

使用背景图片

在div_cpn.js里面写入代码 import "../css/div_style.css" import "../css/title_style.css" //引入less文件 import "../css/bg_style.css" //引入背景图 //引入图片模块 import tq from "../img/t1.png" const divEl = document.createElement("div") //添加css divEl.textContent = "Hello word" divEl.classList.add("content")

document.body.append(divEl)

//创建h2元素 const titleEl = document.createElement("h2") titleEl.textContent = "呵呵呵呵"

titleEl.classList.add("title") document.body.append(titleEl)

//创建img元素 const imgEl = document.createElement("img") imgEl.src = tq document.body.append(imgEl)

//创建div元素设置背景 const divBgEl = document.createElement("div") divBgEl.classList.add("img-bg") document.body.append(divBgEl)

在css文件夹新建一个bg_style.css中写入样式 .img-bg { width: 500px; height: 500px; background: url(../img/t2.png)no-repeat; }
运行代码 : npm run build
webpack.config.js的配置如下: const path = require('path'); module.exports = { entry:"./src/main.js", //入口 output:{ //出口 filename:"bundle.js", path:path.resolve(__dirname,"./bulid") }, module:{ rules:[ //匹配规则 { //告诉webpack匹配什么文件 test:/.css$/, use:[ //执行顺序是从后前的 { loader:"style-loader" }, { loader:"css-loader" } , { loader:"postcss-loader"} // { // loader:"postcss-loader", // options:{ // postcssOptions:{ // plugins:[ // "autoprefixer" // ]
```
          //         }
          //     }
          // }
      ]
    },
    //处理less文件
    {
       test:/\.less$/,
      //  use:[
      //     { loader:"style-loader" },
      //     { loader:"less-loader" }
      //  ]
      //简写
      use:["style-loader" , "css-loader" , "less-loader" , "postcss-loader"]
    },
    {
      test:/\.(png|jpe?g|svg|gif)$/,
```
//type:"asset/resource" //打包这两张图片并且这两张图片有自己的地址将地址设置到img/bg中
type:"asset/inline" // 将图片做了base64的编码 } ] } }

=====================================================================================================

url-loader的limit效果

目的:小的图片需要转换大的图片之间请求

使用步骤: --1.将type 修改成asset --2.添加一个parser属性并且制定dataUrl的条件添加maxSize属性 const path = require('path'); module.exports = { entry:"./src/main.js", //入口 output:{ //出口 filename:"bundle.js", path:path.resolve(__dirname,"./bulid") }, module:{ rules:[ //匹配规则 { //告诉webpack匹配什么文件 test:/.css$/, use:[ //执行顺序是从后前的 { loader:"style-loader" }, { loader:"css-loader" } , { loader:"postcss-loader"} // { // loader:"postcss-loader", // options:{ // postcssOptions:{ // plugins:[ // "autoprefixer" // ]

         //         }
         //     }
         // }
     ]
   },
   //处理less文件
   {
      test:/\.less$/,
     //  use:[
     //     { loader:"style-loader" },
     //     { loader:"less-loader" }
     //  ]
     //简写
     use:["style-loader" , "css-loader" , "less-loader" , "postcss-loader"]
   },
   {
     test:/\.(png|jpe?g|svg|gif)$/,
     //type:"asset/resource" //打包这两张图片 并且这两张图片有自己的地址 将地址设置到img/bg中 缺点:就是多两张图片的网络请求
     // type:"asset/inline" // 将图片做了base64的编码 缺点:造成js文件非常的大 造成js代码的下载和解析时间过长

     //3.合理规范
     //3.1 对于小一点的图片 可以进行base64的编码
     //3.2 对于大一点的图片 单独打包形成了url地址

type:"asset",
parser:{
dataUrlCondition:{
maxSize:60 * 1024 //设置图片类型的打包
}
},
generator:{ //占位符 //name:指向原来的图片名称 //ext拓展名 filename:"[name]_hash" } } ]
} }

=====================================================================================================

对js的打包

ES6 代码转换成ES6的代码要用babel 安装babel指令: npm install babel-loader -D npm install @babel/plugin-transform-arrow-functions ....等等代码指令
在webpack.config.js里面配置 { test:/.js$/, use:[ // "babel-loader" { loader:"babel-loader", // options:{ // plugins:[ // "@babel/plugin-transform-arrow-functions" // ] // } }, ] }

----太麻烦了 ----

使用babel预设 babel.config.js
创建babel.config.js文件(写入代码) module.exports = { plugins:[ "@babel/plugin-transform-arrow-functions" ] }
安装babel的预设 (安装指令:npm install @babel/preset-env)
将babel.js文件改为: module.exports = { // plugins:[ // "@babel/plugin-transform-arrow-functions" // ]

presets:[ "@babel/preset-env" ] }

=====================================================================================================

对vue的打包

第一步:在src/创建vue_demo文件写入代码

.p { font-size: 20px; color: 15px; } </style>

第二步:把Hello.vue组件导入到main.js中 // 导入vue组件 import { createApp } from 'vue' import Hello from "./vue_demo/hello.vue"

//vue代码 createApp(Hello)

第三步:在index.html中挂载
第四步:安装vue指令loader: npm install vue-loader -D

=====================================================================================================

第五步:在webpack.config.js里面配置 const path = require('path');
const { VueLoaderPlugin } = require("vue-loader/dist/index")

module.exports = { entry:"./src/main.js", //入口 output:{ //出口 filename:"bundle.js", path:path.resolve(__dirname,"./bulid") }, module:{ rules:[ //匹配规则 { //告诉webpack匹配什么文件 test:/.css$/, use:[ //执行顺序是从后前的 { loader:"style-loader" }, { loader:"css-loader" } , { loader:"postcss-loader"} // { // loader:"postcss-loader", // options:{ // postcssOptions:{ // plugins:[ // "autoprefixer" // ]

            //         }
            //     }
            // }
        ]
      },
      //处理less文件
      {
         test:/\.less$/,
        //  use:[
        //     { loader:"style-loader" },
        //     { loader:"less-loader" }
        //  ]
        //简写
        use:["style-loader" , "css-loader" , "less-loader" , "postcss-loader"]
      },
      {
        test:/\.(png|jpe?g|svg|gif)$/,
        //type:"asset/resource" //打包这两张图片 并且这两张图片有自己的地址 将地址设置到img/bg中 缺点:就是多两张图片的网络请求
        // type:"asset/inline" // 将图片做了base64的编码 缺点:造成js文件非常的大 造成js代码的下载和解析时间过长

        //3.合理规范
        //3.1 对于小一点的图片 可以进行base64的编码
        //3.2 对于大一点的图片 单独打包形成了url地址

        type:"asset",
        parser:{
          dataUrlCondition:{
            maxSize:60 * 1024 //设置图片类型的打包
          }
        },
        generator:{
          //占位符
          //name:指向原来的图片名称
          //ext拓展名
          filename:"[name]_[hash][ext]"
        }
      },
      // 把ES6 转成成 ES5代码
      // {
      //   test:/\.js$/,
      //   use:[
      //     { 
      //       loader:"babel-loader",
      //       // options:{
      //       //   plugins:[
      //       //     "@babel/plugin-transform-arrow-functions"
      //       //   ]
      //       //   }
      //     },
          
      //   ]
      // }
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
},

plugins:[ new VueLoaderPlugin()
] }

安装@vue/compiler-sfc ---解析vue文件

指令:npm install @vue/compiler-sfc -D

在执行 npm run build

=====================================================================================================

extensions和alias的配置

1.extensions是解析文件是自动添加的扩展名: -默认值是['.wasm','.mjs','.js','.json'] 所以如果我们要添加加载.vue或者jsx 或者 ts等文件时,我们必须自己写扩展名

2.另一个非常好用的功能是配置别名alias -特别是当我们项目的目录结构比较深的时候或者一个文件的路径可能需要 ../../../这中路径片段 --相当于别名

在webpack.config.js里面配置resolve可以解决引入后缀名的繁琐 module.exports = { // 配置resolve resolve:{ extensions:[".js",".json",".vue",".jsx",".ts",".tsx"] }, }

如果是文件夹会根据resolvemainFiles配置选项中指定的文件顺序查找

-1.resolve.mainFiles的默认值是['index'] -2在根据resolve.extensions来解析扩展名

alias配置别名

--在webpack.config.js里面配置 module.exports = { // 配置resolve resolve:{ extensions:[".js",".json",".vue",".jsx",".ts",".tsx"], // 配置别名:作用:解决查找路径的繁琐 alias:{ utils:path.resolve(__dirname,"./src/utils") } } }

=====================================================================================================