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 ~~~