使用 webpack 对项目 静态资源 进行打包

webpack能处理前端模块间的引用关系并将静态资源打包成一个文件，减少了页面请求

初始化一个项目：

npm init -y

安装webpack：

npm install -g webpack webpack-cli

安装css打包用插件：

PS：Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

所以需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader 

有一个css文件放置在css目录下：

body{
    background-color: blue;
}

 有三个js文件放置在src目录下：

common.js：

export function print(message){
    document.write(message);
}

utils.js：

export function sum(a,b){
    return a + b;
}

main.js 引用common和utils模块以及css文件：

const common = require('./common.js');
const utils = require('./utils.js');

require('../css/style.css');

common.print("Hello Message," + utils.sum(2,4));

创建 webpack.config.js文件：

 

//nodejs 内置模块
const path = require('path');
module.exports = {
    entry: './src/main.js', //入口文件设置
    output: {
        path: path.resolve(__dirname,'./rs'), //输出路径
        filename: 'rs.js'
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

使用webpack进行打包（设置mode可以免去提示警告‘ webpack --mode=development/production ’）：

webpack --mode=development

 

新建index.html文件引入 rs.js

 

<script src="./rs/rs.js"></script>

使用VSCode live server 插件运行：

 

结果如下：

PS：VSCode live server插件安装方法如下：