一、合并JS
1.创建一个node.js项目 npm init -y
2. 创建一个src目录
3. 在src存放两个需要合并的util.js和common.js
util.js
exports.sum = (a,b)=>a+b;
common.js
exports.info = function(str){
console.log(str);
document.write(str);
}
4. 准备一个入口文件main.js，其实就是模块集中进行引入
main.js
const util = require("./util");
const common = require("./common");
common.info("you are a dog"+util.sum(100,200))
5. 在根目录下定义个webpack.config.js文件配置打包的规则
webpack.config.js
const path = require("path");
// 定义打包规则
module.exports = {
// 源文件路径
entry:"./src/main.js",
// 目标文件路径
output:{
// 指定目录
path:path.resolve(__dirname,"./dist"),
// 指定文件
filename:"bundle.js"
}
}
6. 在当前目录下执行webpack命令查看效果
二、CSS合并
1. 导入依赖
cnpm install --save-dev css-loader style-loader
2. 在webpack.config.js文件中加入配置
module:{
rules:[{
test:/\.css$/,
use:["style-loader","css-loader"]
}]
}
3. 创建css
style.css
body{
background: yellow;
}
4. 在main.js中导入css
require("./style.css");
5. 在当前目录下执行webpack命令查看效果
加-w参数实时监听
