webpack是一个打包工具，现在大的项目的都是模块化的便于开发与维护。 小的项目中我们或许可以使用自执行函数（）（）的形式，但是大的项目中采用模块化的的工具来管理各个小模块，es6也原生支持模块化，一个文件就是一个模块，只需要暴露接口，声明引用，然后直接使用就好了。 Webpack 打包本身支持 CommonJS, AMD 甚至 ES6 Modules，而且不需要引用额外的库，只需要直接修改 js 文件，声明依赖和暴露接口就可以了，打包后的模块也会有自己单独的作用域，模块中声明的变量如 var a = 1 不会影响全局环境，除非通过 window.a = 1 声明，这样才会挂到全局变量。 所以我们修改源代码的 js 文件只需要根据注释在 头部声明依赖 以及 最后声明本模块暴露的接口或对象 即可。 下面我将一步步从无到有使用 Webpack 构建一个项目。 #### webapack安装 ~~~ npm install --global webpack ~~~ 安装好了之后查看版本，验证一下 ~~~ webpack -v ~~~ 出现下面这个就好啦  和gulp一样 有一个依赖和配置文件 package.json内容 ~~~ { "name": "project", "version": "1.0.0", "description": "", "main": "./src/index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^0.28.9", "html-webpack-plugin": "^2.30.1", "style-loader": "^0.19.1", "webpack": "^3.10.0" } } ~~~ 配置 ~~~ var path = require('path'); var webpack = require('webpack'); var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, './dist') }, module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] //css一并打包 }] }, plugins: [ new UglifyJsPlugin(), // 加入 html 模板任务 new HtmlWebpackPlugin({ // 模板文件 template: 'src/index.html', // 打包后文件名称，会自动放到 output 指定的 dist 目录 filename: 'index.html' }) ] } ~~~ 还有一个热更新的功能，不然做的时候不可能每次自己去手动输入一次命令 使用的是webpack-dev-server ~~~ npm i webpack-dev-server -g ~~~ 安装成功  这个时候我们进入项目目录 ~~~ webpack-dev-server --open ~~~