Webpack打包（JS和CSS）

最新推荐文章于 2023-08-06 16:23:56 发布

summeblace

最新推荐文章于 2023-08-06 16:23:56 发布

阅读量199

点赞数

文章标签： webpack intellij idea css nodejs

本文链接：https://blog.csdn.net/summeblace/article/details/119348673

版权

Webpack打包（JS和CSS）

项目总目录结构

在这里插入图片描述

1、下载需要的软件包

命令：

Js包：
	npm install webpack -g
	npm install webpack-cli -g
Css包：
	cnpm install style-loader css-loader --save-dev

2、编写Js文件和Css文件，以及显示结果的html文件

bar.js

exports.info = function (str){
    document.write(str);
}

logic.js

exports.add = function (a,b){
    return a+b;
}

css1.css

body{
    background-color: blue;
}

将他们全部导入到main.js入口函数中
main.js

//引入两个js文件
var bar =require('./bar');
var logic = require('./logic');
//引入css文件
require('./css/css1.css');
//引用bar和logic函数在网页显示出来
bar.info('100 + 200='+logic.add(100,200));

让他们在index.html网页中显示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nodejs测试</title>
    <script src="dist/bundle.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>

3、编写webpack的配置文件

webpack.config.js

var path = require('path');
//exports 就是 module.exports
//但是这里直接赋值，所以不能直接使用exports.否则exports就不是module.exports了
module.exports = {
    //入口文件
    entry:"./src/main.js",
    output:{
        //__dirname是node的一个全局变量，获得当前文件所在目录的完整目录名
        path:path.resolve(__dirname,"./dist"),
        filename:"bundle.js"
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:["style-loader","css-loader"]
            }
        ]
    }
}