WebPack合并

一、合并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参数实时监听