webpack一

发表于 | 分类于

webpack打包

新建webpack

node目录下全局安装 webpack

1
npm install -g webpack

进入webpack1文件夹，并安装依赖

1
2
cd webpack1
cnpm install webpack --save-dev

–save-dve //开发环境
–save //线上环境

初始化package.json信息，标题，作者…

1
npm init

webpack1文件夹中创建app文件夹(处理后)和public文件夹(处理前)

public/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>webpack-demo</title>
</head>
<body>
    <div id='root'>
    </div>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

app/Greeter.js

1
2
3
4
5
module.exports = function() {
    var greet = document.createElement('div');
    greet.textContent = "Hi there and greetings!";
    return greet;
}

app/main.js

1
2
3
var greeting = require('./Greeter.js');
document.getElementById('root').appendChild(greeting());

Webpack 配置文件

包含入口文件路径和存放打包后文件的地方路径

1
2
3
4
5
6
7
module.exports = {
    entry: __dirname + "/app/main.js", //入口文件路径
    output: {
        path: __dirname + "/public/", //存放打包后文件的地方路径
        filename: "bundle.js" //打包后的文件名
    }
}

终端运行 webpack

public 文件夹下也会出现打包好的 bundle.js 文件
网页打开index.html，出现

1
Hi there and greetings!

利用 npm 更快捷的执行打包任务

在 package.json 中对 npm 的脚本部分进行相关设置，相当于把 npm 的 start 命令指向 webpack 命令
package.json

1
2
3
4
5
6
7
8
9
10
{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
        "start": "webpack"
    },
    "author": "",
    "license": "ISC"
}

执行 npm start 后命令行,最终效果是不是与之前的一样