打包所有的
资源 脚本

STATIC ASSETS .png .css .jpg .js MODULES WITH DEPENDENCIES .jpg .png .sass .sass .js .sass .cjs .hbs .js

编写代码

src/index.js

import bar from './bar';

bar();

src/bar.js

export default function bar() {
  //
}

使用 webpack 打包

Without config or provide custom webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

page.html

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

然后在命令行运行 webpack 就会创建 bundle.js

让一切变得简单

立即开始更多关于 webpack 核心概念的高级信息,请通过快速查阅指南部分,或深入概念部分来了解。

Js中文网 - 前端进阶资源教程

一个致力于帮助开发者用代码改变世界为使命的平台,在这里每天都能找到技术世界的头条内容,包括:前端、大厂面试题、typescript教程、小程序、Javascript、Java等内容。目前已经覆盖超过 300 万开发者,同时还有面试题系列、前端进阶专栏文章等。即便你是 GitHub、StackOverflow、开源中国、掘金的用户,我们相信你也可以在这里有所收获,欢迎热爱技术的你加入交流与学习!