webpack
1 webpack安装
1.1 全局安装
npm install -g webpack webpack-cli
1.2 查看版本号,判断是否安装成功
webpack -v
2 webpack合并js
2.1 创建项目文件夹
2.2 初始化项目
npm init -y
2.3 创建src文件夹,并放入两个需要合并的文件
2.3.1 common.js
//输出 exports.info = function(str){ //往控制台输出 console.log(str); //往浏览器输出 document.write(str); }
2.3.2 util.js
//相加函数 exports.add = (a,b) => a + b;
2.4 在src中创建一个入口文件 main.js,用于模块集中进行引入
//导入util const util = require("./util"); //导入common const common = require("./common"); common.info("Hello world,"+util.add(100,150));
2.5 在根目录下定义个webpack.config.js文件配置打包的规则
//导入path模块 nodejs内置模块 const path = require("path"); //定义js打包的规则 module.exports = { //1:入口函数从哪里开始编译打包 entry:"./src/main.js", //2:编译成功以后把内容输出到哪里去 output:{ //2-1:定义输出的指定的目录__dirname当前项目根目录,产生一个dist文件夹 path:path.resolve(__dirname,"./dist"), //2-2:合并的js文件存储在dist/bundle.js文件中 filename:"bundle.js" } }
2.6 执行结果
2.6.1 执行webpack命令
注:webpack 后面应当添加 -配置文件名,但是配置文件名是:webpack.config.js,就可以省略不写
webpack
2.6.2 会在根目录自动生成一个dist文件夹,里面存放一个js文件,这就是自动加密合并后的文件
(()=>{var o={648:(o,r)=>{r.info=function(o){console.log(o),document.write(o)}},891:(o,r)=>{r.add=(o,r)=>o+r,r.mul=(o,r)=>o-r}},r={};function n(e){var t=r[e];if(void 0!==t)return t.exports;var l=r[e]={exports:{}};return o[e](l,l.exports,n),l.exports}(()=>{const o=n(891),r=n(648);r.info("Hello world,"+o.add(100,150)),r.info("Hello world,"+o.mul(150,100))})()})();
2.6.3 在dist文件夹下创建一个index.html文件,引入生成的文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="bundle.js"></script> </body> </html>
2.6.4 在浏览器运行index.html
2.7 动态监听
2.7.1 运行命令webpack -w
webpack -w
2.7.2 修改util.js
//相加函数 exports.add = (a,b) => a + b; exports.mul = (a,b) => a - b;
2.7.3 修改main.js
//导入util const util = require("./util"); //导入common const common = require("./common"); common.info("Hello world,"+util.add(100,150)); common.info("Hello world,"+util.mul(150,100));
2.7.4 刷新浏览器,查看结果
3 webpack合并css
3.1 安装 style-loader 和 css-loader
npm install --save-dev style-loader css-loader
3.2 在webpack.config.js文件中添加css打包的配置
//导入path模块 nodejs内置模块 const path = require("path"); //定义js打包的规则 module.exports = { //1:入口函数从哪里开始编译打包 entry:"./src/main.js", //2:编译成功以后把内容输出到哪里去 output:{ //2-1:定义输出的指定的目录__dirname当前项目根目录,产生一个dist文件夹 path:path.resolve(__dirname,"./dist"), //2-2:合并的js文件存储在dist/bundle.js文件中 filename:"bundle.js" }, module:{ rules:[{ test:/\.css$/,//把项目中所有的.css结尾的文件进行打包 use:["style-loader","css-loader"] }] } }
3.3 在src下新建一个style.css文件
body{ background:yellow; }
3.4 在main.js中引入css文件
//导入css require("./style.css");
3.5 执行webpack命令
webpack
3.6 刷新浏览器查看结果
3.7 动态监听
参考本篇博客2.7的内容
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术