Webpack官网
Webpack在github上的首页
在releases下面可以看到所有发布的版本。
一、npm
设置npm，让下载更快。在git Bash下运行如下命令：
npm config set loglevel http // 知道npm 发的每一个请求
npm config set progress false // 关闭进度条
npm config set registry https://registry.npm.taobao.org/ // 从淘宝的服务器下载各种包
touch ~/.bashrc; echo 'export PHANTOMJS_CDNURL="http://npm.taobao.org/mirrors/phantomjs"' >> ~/.bashrc // 让 npm 从淘宝下载 phantomjs
touch ~/.bashrc; echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc // 让 npm 从淘宝下载 SASS
source ~/.bashrc
二、Creating a bundle
mkdir webpack-demo && cd webpack-demo // 创建webpack-demo目录，并进入此目录
npm init -y // 创建了一个 package.json 文件
npm install --save-dev webpack // 安装webpack
运行完之后如果出现满满的英文，就是webpack安装成功了。
- app/index.js
mkdir app && cd app // 创建app目录，并进入此目录
touch index.js
编辑index.js文件
function component () {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Hello','webpack'], ' '); // _.join是lodash 暴露的全局变量
return element;
}
document.body.appendChild(component());
touch index.html // 不是在app目录下面
此时的文件结构
.
├── app
│ └── index.js
├── index.html
└── package.json
编辑index.html
<html>
<head>
<title>webpack 2 demo</title>
<script src="https://unpkg.com/lodash@4.16.6"></script> // 使用 script 引入了 lodash v4.16.6。也可以在webpack-demo目录下运行npm install --save lodash，lodash 的源代码就被下载到 ./node_modules/lodash/ 目录中
</head>
<body>
<script src="app/index.js"></script>
</body>
</html>
注：Lodash是一个著名的javascript原生库，不需要引入其他第三方依赖。是一个意在提高开发者效率,提高JS原生方法性能的JS库。
在 app/index.js 的第一行添加
import _ from 'lodash';
把app/index.html改掉
<html>
<head>
<title>webpack 2 demo</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script> //删除
</head>
<body>
- <script src="app/index.js"></script>
+ <script src="dist/bundle.js"></script> // 新增
</body>
</html>
在控制台运行：
./node_modules/.bin/webpack app/index.js dist/bundle.js // 将 app/index.js 变成 dist/bundle.js
打开index.html。如果出现“Hello webpack”，则说明成功。
- 文件整体结构
.
├── app
│ └── index.js
├── dist
│ └── bundle.js
├── index.html
├── node_modules/
└── package.json
几点说明：
1.index.html里面引用的是dist/bundle.js。
2.lodash 被安装在 node_modules 里面。
3.webpack也被安装在node_modules里，./node_modules/.bin/webpack是一个可执行文件。
4.webpack和lodash的版本号都被写在package.json里面。
三、modify
- 初步改进
- 引入jQuery
npm i -S jquery // 在webpack-demo目录下，npm install --save jquery
这样jQuery就被下载到node_modules里面。
接着在app/index.js里面引入jQuery。
import _ from 'lodash'
+import j from 'jquery'
function component () {
\- var element = document.createElement('div');
\+ var element = j('<div></div>');
/* lodash is required for the next line to work */
\- element.innerHTML = _.join(['Hello','webpack'], ' ');
\+ element.html(_.join(['Hello','webpack'], ' '))
\- return element;
\+ return element.get(0);
}
document.body.appendChild(component());
在终端运行：
./node_modules/.bin/webpack app/index.js dist/bundle.js
在浏览器打开index.html，如果看到“Hello webpack”，说明成功引入jquery。
关于bundle.js里面的内容，下次再另外介绍。
- 进一步改进
因为每次都要运行./node_modules/.bin/webpack app/index.js dist/bundle.js，很麻烦，所以官网也给出了办法。
在根目录下（webpack-demo），新建并编辑 webpack.config.js。
var path = require('path');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
上面的./node_modules/.bin/webpack app/index.js dist/bundle.js就可以换成./node_modules/.bin/webpack --config webpack.config.js。
此时的命令依然很长，还可以修改package.json文件。
"scripts": {
\- "test": "echo \"Error: no test specified\" && exit 1"
\+ "test": "echo \"Error: no test specified\" && exit 1",
\+ "build": "webpack"
},
"keywords": [],
增加了一个build，内容为webpack。
运行npm run build。
npm run bulid等于node_modules里的webpack可执行文件，这个可执行文件会自己去 webpack.config.js 里找 app/index.js、dist 和 bundle.js 三个关键词。
- 减小bundle.js体积
因为代码没压缩，导致bundle.js文件很大。webpack 自带了一个压缩插件 UglifyJsPlugin，只需要在配置文件中引入即可。
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
也可以修改build脚本。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
- "build": "webpack"
+ "build": "webpack -p"
},
运行./node_modules/.bin/webpack --help可以看到：
官网的解释
这个命令会做三件事：
- 使用webpack自带的UglifyJsPlugin压缩插件将代码进行压缩，减小体积；
- 运行loader-options-plugin，它的用途是帮助人们从 webpack 1 迁移至 webpack 2；
- 设置node的环境变量。
四、watch
watch: webpack 监听文件变动，一旦我们保存了文件，重新 build 代码。
Development
往下翻到webpack Watch Mode。在package.json文件中修改：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "dev": "webpack --progress --watch"
},
"keywords": [],
运行npm run dev。打开 index.html， 编辑 app/index.js，把 Hello 改成 Hi。这时候 webpack 会自动 build ，刷新页面，就会出现Hi webpack。
如果要自动刷新，可以再往下翻到webpack-dev-server。
修改index.html：
<script src="/bundle.js"></script>
安装webpack-dev-server：npm install --save-dev webpack-dev-server，再运行：node_modules/.bin/webpack-dev-server。
此时不能直接打开index.html，因为路径不对。打开http://localhost:8080 即可看到Hi webpack。
代码
