全局安装Installwebapcknpmiwebpack-g现在我们可以全局使用webpack命令了。webpack中的基本命令：webpackenter.jsoutput.js--watch这个命令就是把enter.js打包成output.js，然后html只需要引用这个文件即可。看下面的entry.js，就是一段简单的js代码。//这里是js逻辑处理letpeople=require('./people')let$=require('jquery')$.each(people,function(key,value){$('body').append('

'+people[key].name+'

')})那么如何打包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'},//需要依赖的插件或加载模块：{loader:[{test:/\.css$/,loader:'style-loader!css-loader'}]}}下面是一个简单的开发目录。该目录的配置文件如下ps：转码es6需要安装babel-core、babel-loader、babel-env,babel-preset-es2015module.exports={//入口文件entry:'.src/js/app.js',//导出文件output:{path:__dirname,filename:'bundle.js'},//需要依赖的插件或加载器：{loader:[//cssloading{test:/\.css$/,loader:'style-loader!css-loader'},//从es6转码到es2015{test:/\.js/,loader:'babel-loader',query:{presets:['es2015']//ps也可以写在.babelrc文件里},exclude:/node_modules/}]},//自动生成html文件并导入js插件：[newwebpack.optimize.UglifyJsPlugin(),newHtmlWebpackPlugin({template:'./index.html'})]}