第一步还是 全部全局安装webpack（貌似很多工具都是要全局安装的）
npm i webpack -g
第二步项目内安装（–save-dev 可以用 -D 代替，作用是将webpack保存到依赖项中）
npm install webpack –save-dev
项目目录
app是开发目录，dist是生产目录，需要在根目录下新建html，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack-demo</title> </head> <body> <script src="dist/bundle.js"></script> </body> </html>接下来是webpack.config.js：
var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname ,'dist') } };最后在app/index.js中，写个简单的 alert 函数查看效果
接下来运行 webpack。
效果图：
上面是最简单的webpack使用。
如果app下有两个js，修改一下entry参数即可：
entry: { bundle: './app/index.js', bundle1: './app/index1.js' }, output: { filename: '[name].js', path: path.resolve(__dirname ,'dist') }运行 webpack 命令，就会输出 bundle.js 和 bundle1.js 。
接下来是编译是es6，编译es6必须安装 babel-loader 和 babel-preset-es2015（安装：npm install xx –save-dev）：
修改上面的两个index.js： index1.js
const a = 3; export default function(){ return a; }index.js
import app from './index1' alert(app());webpack.config.js:
... module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015'] } } ] }运行 webpack 命令，查看效果：
接下来是css-loader，需要安装 css-loader (安装方法同上）： 需要新创建一个css：
body { background: #333; }index.js 引用：
import css from './app.css'webpack.config.js 修改：
... ... { test: /\.css$/, use: ['style-loader', 'css-loader'] }运行webpack命令，刷新页面可以看到背景变成暗色。
未完待续。。。
