1.创建项目webpackapp
mkdir webpackapp
2.使用init命令初始化项目webpackapp,init命令会自动生成package.json文件
cnpm init
3.查看项目下的目录和文件
dir
4.查看package.json文件的内容,这些内容就是使用init命令时输入的内容信息
more package.json
5.在项目根目录中安装webpack
cnpm install webpack --save-dev
6.创建项目业务目录和文件
mkdir app dir mkdir public dir
cd app echo ... > Greeter.js dir echo ... > main.js dir cd .. cd public echo ... > index.html dir
7.修改index.html文件,内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id='root'> </div> <script src="bundle.js"></script> </body> </html>
8.修改Greeter.js文件,内容如下
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());
9.修改main.js文件,内容如下
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
10.使用webpack命令打包
webpack app/Greeter.js public/bundle.js
11.查看public目录下生成的bundle.js文件
cd public dir more bundle.js
12.在浏览器中打开index.html文件,输出如下
本文转自 素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1899038