Webpack涉及到的命令行：
# 安装到全局
$ npm install webpack -g
# 安装到项目本地依赖
$ npm install webpack --save-dev
# 查看 webpack 版本信息
$ npm info webpack
# 安装指定版本的 webpack
$ npm install webpack@1.14.0 --save-dev
# 安装Webpack开发工具
$ npm install webpack-dev-server --save-dev
# 安装css、style loader
$ npm install css-loader style-loader -save-dev
webpack实际操作：
# 基本方法
$ webpack
# 提供watch方法，实时进行打包更新
$ webpack -w
# 对打包后的文件进行压缩，提供production
$ webpack -p
# 提供source map，方便调试。
$ webpack -d
最最基础的用法：
建一个文件夹，然后在文件夹根目录下面建这个几个文件：
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
// entry.js
document.write(require('./module.js'))
// module.js
module.exports = 'It is OK!'
在命令行执行以下指令：
$ webpack entry.js bundle.js
这条命令的作用是将entry.js打包到bundle.js
其中entry.js还引用到module.js，module.js也被一并打包到bundle.js
这时双击打开index.html文件，就可以看到 “It is OK!” 几个字。
Loader：
Webpack本身只能处理javascript文件，有了Loader之后，几乎可以通过require来加载任何类型的文件或者模块，比如：图片、JSX、LESS等。
--------此处省略Loader的特性等，先把例子写起来再说--------
Loader的使用：
安装Loader:
$ npm install css-loader style-loader
还是上面的例子，现在我们来写一个css：
/* style.css */
body {
background-color: grey;
}
然后在entry.js中引入这个文件：
// entry.js
require("./style.css");
document.write(require('./module.js'));
接着命令行执行：
webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'
打包好之后，刷新index.html，就可以看到刚刚写的css样式了。
但是每次要在命令行输入这么长的命令，显然很不好，所以要搞个配置文件，来简化命令，然后其他人参与这个项目，跟着配置文件走就行了。
配置文件：
Webpack在运行时，除了命令行执行操作，也可以通过配置文件来执行。默认情况下会搜索当前目录的 webpack.config.js ，这个文件是一个node.js模块，返回一个json格式的配置信息对象，或者通过 --config 选项来指定配置文件。
来建一个配置文件 webpack.config.js:
// webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}
在配置文件中配置好入口、出口、loader，在命令行执行：
$ webpack
非常一颗赛艇。
插件：
插件可以做很多loader做不了的事情。
wenpack已经内置很多常用的插件，也可以通过npm来安装第三方插件。
动词打次搞起来：
我们自己来搞一个插件，修改一下webpack.config.js:
var webpack = require('webpack');
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
},
plugins: [
new webpack.BannerPlugin('苟利国家生死以，岂因祸福避趋之！')
]
}
可以看到改动的地方是增加了：
plugins: [
new webpack.BannerPlugin('苟利国家生死以，岂因祸福避趋之！')
]
改好之后，执行webpack命令：
$ webpack
这时，我们看一下bundle.js，可以发现文件最上面多了一行注释：
/*! 苟利国家生死以，岂因祸福避趋之！ */
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
...
哈哈，溜得很。
网友评论