Webpack的使用

最新推荐文章于 2023-12-24 21:20:52 发布

BLUcoding

最新推荐文章于 2023-12-24 21:20:52 发布

阅读量10w+

点赞数 1

分类专栏：前端技术文章标签： webpack

本文链接：https://blog.csdn.net/BLU_111/article/details/108325245

版权

前端技术专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Webpack 的使用

安装webpack：

cnpm install webpack -g

cnpm install webpack-cli -g

查看安装版本：

webpack -v
4.44.1

webpack-cli -v
3.3.12

使用webpack：

创建一个空文件夹 mywp01 作为项目目录
创建 modules 文件夹，在该文件夹内创建 hello.js 和 main.js

hello.js

exports.sayHi = function () {
    document.write("<h1>Hello,BLU!</h1>")
}

main.js

var hello = require("./hello");
hello.sayHi();

在 mywp01 目录下创建 webpack.config.js 文件：

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

使用 webpack 命令打包，在 dist/js 目录下生成了 bundle.js 文件

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){n(1).sayHi()},function(e,t){t.sayHi=function(){document.write("<h1>Hello,BLU!</h1>")}}]);

创建 index.html 文件并引入生成的 bundle.js 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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