1.cmd--项目目录下使用 npm init 创建package.json文件。
系统会询问 package name等信息。如果使用了 -f（代表force）、-y（代表yes），则跳过提问阶段，直接生成一个新的 package.json 文件。
2.package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install webpack --save-dev
3.回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来再创建三个文件:
index.html --放在public文件夹中;
greeter.js-- 放在app文件夹中;//模块文件
main.js-- 放在app文件夹中;//主文件
4.使用webpack:
node_modules/.bin/webpack 主入口文件路径 打包后的js文件路径
node_modules/.bin/webpack app/main.js public/bundle.js
5.通过配置文件使用webpack:
在项目文件夹根目录下新建配置文件 ?webpack.config.js
代码:
module.exports = {
? entry: ?__dirname + "/app/main.js",//已多次提及的唯一入口文件
? output: {
??? path: __dirname + "/public",//打包后的文件存放的地方
??? filename: "bundle.js"//打包后输出文件的文件名
? },
? module:{
? loaders:[
? {
? test:/\.js$/,
? loader:‘babel-loader‘ //首先需要安装babel
? }
? ]
? }
}
有了配置文件之后,在终端运行
node_modules/.bin/webpack
6.npm start
在package.json中对scripts对象进行设置
"scripts":{
"start" : "webpack"
}
终端运行 npm start 即可打包文件
7.安装babel(管理员模式下运行cmd)
npm install --save-dev babel-loader babel-core
8.监视模式 webpack --watch
webpack入门笔记
原文地址：http://www.cnblogs.com/yin-1841/p/7730043.html