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 appdirmkdir publicdir
cd appecho ... > Greeter.jsdirecho ... > main.jsdircd ..cd publicecho ... > index.htmldir
7.修改index.html文件,内容如下
Webpack Sample Project
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 publicdirmore bundle.js
12.在浏览器中打开index.html文件,输出如下
本文转自 素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1899038