安装（全局安装）
首先要安装node.js，node.js自带了软件包管理器npm，webpack需要node.js v0.6以上支持，建议使用最新版node.js。
npm install -g webpack
建立项目
新建项目目录webpack-project，然后进入项目
//初始化项目，生成package.json文件
npm init
// 安装 webpack 依赖，可以使用项目本地版本的webpack
npm install webpack --save-dev
//缩写
npm i webpack -D
webpack -h可查看当前安装的版本信息
在文件夹下打开项目配置文件package.json如下：
{
"name": "webpack-project",
"version": "1.0.0",
"description": "webpack学习笔记demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "zqq",
"license": "ISC",
"devDependencies": {
"webpack": "^3.0.0"
}
}
还可以安装不同的版本
npm install [email protected] --save-dev
创建代码文件
在项目根目录下创建Index.html文件和src目录，在src目录下创建entry.js
webpack-project
|--src
| |--entry.js
| |--index.js
|--index.html
|--package.json
index.html文件：
Webpack First Project
entry.js
document.write("hi webpack!");
在控制台或命令行，输入以下命令打包：
$webpack src/entry.js src/bundle.js
如果成功，会看到下面代码：
Hash: 2852c5082c8d2ef73222
Version: webpack 3.0.0
Time: 66ms
Asset Size Chunks Chunk Names
bundle.js 2.51 kB 0 [emitted] main
[0] ./src/entry.js 33 bytes {0} [built]
打开Index.html，你将会看到页面上显示：
hi webpack
在src下面新建index.js
module.exports = "这里是 index.js 的内容！";
更新下entry.js
document.write(require("./index.js"));
再次输入下面命令：
webpack src/entry.js src/bundle.js
打开index.html你将会看到：
这里是index.js内容
打包css
安装css-loader ，style-loader 模块
.css文件使用style-loader 和 css-loader编译处理
.js文件使用jsx-loader编译处理
.scss文件使用style-loader、css-loader和sass-loader来编译处理
安装css-loader
npm install css-loader --save -dev
在src目录下添加style.css
body{
font-size: 32px;
color: green;
}
更新entry.js
//注意这是webpack2.0的写法，webpack1.0是不用加后缀-loader的
require("!style-loader!css-loader!./css/style.css");
document.write(require("./index.js"));
再次输入下面命令：
webpack src/entry.js src/bundle.js
使用webpack.config.js
在项目目录下新建webpack.config.js文件。
module.exports = {
entry: "./src/entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders:[{
test:/\.css$/,
loader:"style-loader!css-loader"
}]
}
};
运行项目，输入下面命令：
webpack
webpack命令会优先读取项目中的webpack.config.js文件
添加plugin，BannerPlugin内置插件是给输出的文件头部添加注释信息。
var webpack = require('webpack');
module.exports = {
entry: "./src/entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders:[{
test:/\.css$/,
loader:"style-loader!css-loader"
}]
},
plugins: [
new webpack.BannerPlugin('This file is created by zqq')
]
};
运行webpack，打开bundle.js可以看到头部文件出现了我们指定的注释信息：
/*! This file is created by zqq */
加载图片
对于url-loader来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：
npm install url-loader
配置webpack.config.js文件
var webpack = require('webpack');
module.exports = {
entry: "./src/entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders:[{
test:/\.css$/,
loader:"style-loader!css-loader"
},
{
test: /\.(png|jpg)$/,
loader: "url?limit=32000" // 添加到这
},
]
},
plugins: [
new webpack.BannerPlugin('This file is created by zqq')
]
}
注意后面的limit的参数，当图片大小小于这个限制的时候，会自动启动base64编码图片。
我在输入webpack运行时报错，提示缺少了file-loader，然后安装了file-loader后在运行，编译正确。
打开Index.html页面可看到背景图片以设置成功。
index.png
webpack笔记demo这次的工程代码全部放到github了，以后会持续更新的。
Webpack教程—阮一峰这里的最好全都敲下，啊啊我也还没有敲完
rose.png