webpack（一）

最新推荐文章于 2022-11-14 17:47:25 发布

huakaiwuxing

最新推荐文章于 2022-11-14 17:47:25 发布

阅读量175

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/huakaiwuxing/article/details/90716397

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用webpack需要具备的条件：

1.电脑上安装了5.0.0以上的node.js

2.安装webpack，可以安装到某个项目（

npm i -D webpack

）也可以安装到全局（

npm i -g webpack

），顾名思义，安装到全局的话可以在任意地方使用webpack的可执行文件；

一个基本的webpack构建需要两个入口文件index.html、main.js，一个配置文件webpack.config.js,一个工具函数文件show.js

index.html

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 webpack 输出的 JS 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>

main.js

// 通过 CommonJS 规范导入 show 函数
const show = require('./show.js');
// 执行 show 函数
show('Webpack');

show.js

// 操作 DOM 元素，把 content 显示到网页上
function show(content) {
  window.document.getElementById('app').innerText = 'Hello,' + content;
}

// 通过 CommonJS 规范导出 show 函数
module.exports = show;

webpack.config.js

const path = require('path');

module.exports = {
  // JS 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};

项目结构是这样的，之后在项目根目录下直接执行webpack便成功打包自动生成一个可执行的js文件；

以上文件中使用到了es6（例如：const）

也使用到了commonJs（例如：使用了require来加载模块，也使用了exports和module.exports来暴露模块中的内容）

学习的源文章说也有用到amd的相关内容，但amd的学习太欠缺，后续理解了再补上吧；

http://webpack.wuhaolin.cn/

huakaiwuxing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack（一）

使用webpack需要具备的条件：1.电脑上安装了5.0.0以上的node.js2.安装webpack，可以安装到某个项目（npm i -D webpack）也可以安装到全局（npm i -g webpack），顾名思义，安装到全局的话可以在任意地方使用webpack的可执行文件；一个基本的webpack构建需要两个入口文件index.html、main.js...
复制链接

扫一扫

专栏目录