webpack 学习

webpack 学习

1.安装

npm install webpack -g
npm install webpack-cli -g

测试安装成功

  • webpack -v
  • webpack-cli -v

2.使用webpack

1.创建一个文件夹（webpack-study）作为项目，使用idea打开。

2.创建一个名为 modules 的目录，用于防止js模块等资源文件。

3.在modules下创建模块文件，如 hello.js，用于编写js模块相关代码。

//暴露一个方法: sayHi
exports.sayHi = function () {
    document.write("<div>Hello Webpack!</div>");
};

4.在modules下创建一个名为 main.js的入口文件，用于打包时设置entry属性。

// require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();

5.在项目目下创建 webpack.config.js 配置文件，使用 webpack 命令打包。

module.exports = {
    entry: "./modules/main.js",
    output: {
        filename: "./js/bundle.js"
    }
};

6.在项目目下创建 index.html 文件，查看打包运行结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>灯翡说Webpack</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>

3.使用 webpack 命令打包，并查看结果。

打包

运行index.html 查看结果

posted @ 2021-05-26 09:58  忆丶  阅读(57)  评论(0)    收藏  举报