全局安装安装webapck

npm i webpack -g

现在我们就可以全局的使用webpack命令了

webpack中基础的命令：

webpack enter.js output.js --watch

这个命令是将enter.js打包成output.js，然后html只需要引用该文件就可以了
看如下entry.js,这是简单的js代码。

// 这边是处理js逻辑
let people = require('./people')
let $ = require('jquery')$.each(people, function(key, value){$('body').append('<h1>'+people[key].name+'</h1>')
})

那么如何来打包css文件呢，只需要将css也引入到enter.js即可，这样跟文件index.html还是只需要引用output.js即可
引入css需要几个插件；css-loader， style-loader（由于是静态文件，需要编译）

require('!style-loader!css-loader!./style.css')

以上为简单的打包；如果需要复杂的工程的话，webpack推荐使用配置文件来配置
webpack的配置文件必须是webpack.config.js
上面的配置只需要这样写

module.exports = {// 入口文件entry: './app.js',// 出口文件output: {path: __dirname,filename: 'bundle.js'},// 需要依赖的插件或装载器mudule: {loader: [{test: /\.css$/,loader: 'style-loader!css-loader'}]}
}

以下是一个简易的开发目录

针对该目录配置文件如下
ps: 需要将es6转码需要安装 babel-core,babel-loader,babel-env,babel-preset-es2015

module.exports = {// 入口文件entry: '.src/js/app.js',// 出口文件output: {path: __dirname,filename: 'bundle.js'},// 需要依赖的插件或装载器mudule: {loader: [// css加载{test: /\.css$/,loader: 'style-loader!css-loader'},// es6转码为es2015{test: /\.js/,loader: 'babel-loader',query: {presets: ['es2015']  // ps这一块也可以写在.babelrc文件下},exclude: /node_modules/}]},// 自动生成html文件，会引入jsplugins: [new webpack.optimize.UglifyJsPlugin(),new HtmlWebpackPlugin({template: './index.html'})]
}