webpack

WebPack是一个前端静态资源打包工具，它可以把多个静态资源打包成为1个，减少页面资源请求次数。

1 打包js文件

(1) 安装webpack

下面新建文件目录webpackdemo，在该路径下执行npm init -y，然后安装webpack。

npm install -g webpack webpack-cli

查看成功否。

webpack -v

(2)创建资源文件

如下图目录结构创建三个资源文件。

commons.js.

exports.info = function(str) {
    document.write(str)  // 在浏览器页面中输出
}

utils.js.

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

main.js

const common = require("./common.js")
const utils = require("./utils")

common.info("hello,webpack" + utils.add(500,20))

(3)打包

在webpackdemo下新建webpack.config.js。配置webpack打包信息。(记得创建输出文件夹)

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件，main.js文件中已经引入了另外两个js文件
    output: {
    path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径.
    filename: 'bundle.js' //输出文件
    }
}

执行打包命令，成功后会生成bundle.js。

webpack # 有黄色警告
webpack --mode=development # 没有警告

编写test.html文件用于测试。右键浏览器打开即可看到js中输出的内容。

<script src="dist/bundle.js"></script>

2 打包css文件

(1)创建css文件

src下新建style.css.

body{
    background-color: brown;
}

main.js中导入。

require("./style.css")

(2)下载插件

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

(3)创建配置文件

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件，main.js文件中已经引入了另外两个js文件
    output: {
    path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径.
    filename: 'bundle.js' //输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/,        //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

(4)执行打包，请读者自测。