bundle your
assets scripts

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.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 的核心概念以及底层实现。

Support the Team

Through contributions, donations, and sponsorship, you allow webpack to thrive. Your donations directly support office hours, continued enhancements, and most importantly, great documentation and learning material!