webpack window下配置的hello world

小编 2026-06-20 阅读:151 评论:0

峰回路转一区九折先看效果：（此效果是webpack执行完之后会生成build文件夹已经它下面的...

峰回路转一区九折

先看效果：（此效果是webpack执行完之后会生成build文件夹已经它下面的index.html,点击index.html就是下图的效果）

安装

先装好node和npm，因为webpack是一个基于node的项目。然后

npm install -g webpack

总览

官网对webpack的定义是MODULE BUNDLER，他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。请看下图

webpack简单点来说就就是一个配置文件，所有的魔力都是在这一个文件中发生的。这个配置文件主要分为三大块

    entry 入口文件让webpack用哪个文件作为项目的入口
    output 出口让webpack把处理完成的文件放在哪里
    module 模块要用什么不同的模块来处理各种类型的文件

下面我们就一步一步来新建一个简单的项目
建立项目

建一个文件夹，然后新建一个package.json的文件在项目根目录下

mkdir webpack
cd webpack
npm init
# 一直点回车如果懒得填一些信息

如果你使用git管理你的这个项目的话，建议你新建一个.gitignore文件，不要让git提交一些node依赖的模块，你也可以参考github的例子 gitignore/Node.gitignore at master · github/gitignore · GitHub

我们这里就简单一点

node_modules

项目结构

现在项目里面就有一个package.json，我们多加一点东西，慢慢丰富它的内容。

    /app
        index.js
        sub.js
    package.json
    webpack.config.js

添加了两个js文件，添加了最重要的webpack的配置文件，我们还是从非常简单的hello world开始玩起，webpack原生直接支持AMD和CommonJS两种格式，如果你想使用ES6的风格，这点以后再提。
JS代码

sub.js

//我们这里使用CommonJS的风格
function generateText() {
var element = document.createElement('h2');
element.innerHTML = "Hello h2 world";
return element;
}

module.exports = generateText;

index.js

var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);

代码写完了，完成一个很简单的功能，新建一个单独的module，并且在另外一个module里面引用他，最后会在页面里面输出两个标题。
配置Webpack

现在开始配置webpack，目标是把这两个js文件合并成一个文件. 我们可以自己在build文件夹里面手动建一个index.html文件夹，然后再把合并以后的js引用在里面，但是这样有些麻烦，所以我们这里安装一个plugin，可以自动快速的帮我们生成HTML。

npm install html-webpack-plugin --save-dev

好有了这个插件开始写config文件

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
//项目的文件夹可以直接用文件夹名称默认会找index.js 也可以确定是哪个文件名字
entry: APP_PATH,
//输出的文件名合并以后的js会命名为bundle.js
output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
},
//添加我们的插件会自动生成一个html文件
plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
]
};

然后在项目根目录运行

webpack

终端显示一堆信息，然后告诉你成功了。