webpack那些事儿
Webpack是一個前端資源加載（模塊加載器）兼打包工具。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。
grunt/gulp是優化前端開發流程的工具，webpack是一種模塊化解決方案，為了解決可以require不同文件的需求引入了loader，初衷是require everything, bundle everything。webpack的plugins選項擠掉了gulp的市場，而npm/package.json里面的scripts很好用，調用任務寫一個簡單的命令就行。
grunt、gulp的工作方式：在一個配置文件中，指明對某些文件進行編譯，組合，壓縮，之后工具會自動完成這些步驟。
webpack的工作方式：通過一個主文件index.js，查找項目的所有依賴文件，使用loaders處理它們，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件。
溫馨提示：本篇文章以webpack1.x為例來入門學習webpack。
一、webpack的安裝
cnpm是啥東西？電腦系統識別這個命令嗎？請看這里。
保證把nodejs，npm，cnpm都安裝好后，下面開始安裝webpack。可以用windows系統的命令行，也可以用git bash。
二、webpack的使用
demo1
A、創建一個目錄
B、在app目錄中添加main.js文件
document.write("It works。");C、在app目錄中添加index.html文件
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>學習webpack</title></head><body><script type="text/javascript" src="bundle.js"></script></body> </html>D、執行命令
webpack main.js bundle.jsE、在瀏覽器中打開index.html
即可看到，It works。demo2
下面以demo1為基礎，添加或修改文件。
A、在app目錄中添加inner.js文件
B、更新main.js
document.write(require("./inner.js"));C、執行命令
webpack main.js bundle.jsD、在瀏覽器中打開index.html
即可看到，It works from inner.js。三、webpack的loader
Webpack本身只能處理原生的JavaScript模塊，如果要處理其他類型的文件，就需要使用loader進行轉換。
所以如果我們需要在項目中添加css文件，就需要使用css-loader和style-loader，css-loader會負責遍歷css文件，style-loader會把原來的css代碼插入頁面中的一個style標簽中。
1、安裝css-loader
以上面的demo2為基礎，在當前目錄安裝css-loader和style-loader
全局安裝，需要加-g。
執行以上命令后，會在當前目錄生成node_modules文件夾，它就是css-loader和style-loader的安裝目錄。
2、使用css-loader
首先，在app目錄中添加style.css文件
其次，介紹3種使用css-loader的方法
方法A：修改main.js文件
require("!style-loader!css-loader!./style.css"); document.write(require("./inner.js"));執行命令
webpack inner.js bundle.js在瀏覽器中打開index.html
即可看到，It works from inner.js字體變紅。方法B：修改main.js文件，在執行命令的時候綁定。
require("./style.css"); document.write(require("./inner.js"));執行命令
webpack inner.js bundle.js --module-bind 'css=style-loader!css-loader'在瀏覽器中打開index.html
即可看到，It works from inner.js字體變紅。方法C：添加配置文件，把編譯內容放在文件中，統一管理。
//修改main.js，有兩種導入css的方式。 // import './style.css'; require('./style.css'); //在app目錄中添加webpack.config.js文件 module.exports = {entry: "./main.js",output: {path: __dirname, // __dirname是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。filename: "bundle.js"},module: {loaders: [{ test: /\.css$/, loader: "style-loader!css-loader" }]} };webpack.config.js文件通常放在項目的根目錄中，它本身也是一個標準的Commonjs規范的模塊。
接下來我們只需要執行webpack命令，即可生成bundle.js文件。在瀏覽器中打開index.html
即可看到，It works from inner.js字體變紅。最后，介紹4種使用url-loader的方法
//require require("url-loader?mimetype=image/png!./file.png");//cli webpack --module-bind "png=url-loader?mimetype=image/png"//配置文件 { test: /\.png$/, loader: "url-loader?mimetype=image/png" }//配置文件 {test: /\.png$/,loader: "url-loader",query: { mimetype: "image/png" } }四、webpack的plugins
webpack自帶一些插件（內置插件），你也可以安裝一些插件。
下面以BannerPlugin為例，介紹如何安裝和使用內置插件。
1、安裝內置插件
2、修改webpack.config.js文件
var webpack=require('webpack');module.exports = {entry: "./main.js",output: {path: __dirname,filename: "bundle.js"},module: {loaders: [{ test: /\.css$/, loader: "style-loader!css-loader" }]},plugins:[new webpack.BannerPlugin('嘗試webpack的內置插件');] };執行命令webpack，打開bundle.js，可以看到文件頭部出現了我們指定的注釋信息，BannerPlugin插件的作用就是在編譯文件中的首部插入注釋信息。
上面通過一個main.js入口文件，一個index.html，一個index.js，一個style.css文件，和webpack命令，幫我們生成構建后的bundle.js。
五、常用命令
1、構建一個開發目錄
2、查看所有命令
webpack -h webpack --help3、構建一個生產目錄，對打包后的文件進行壓縮混淆
webpack -p4、生成map映射文件
webpack -d5、連續構建，監聽
webpack --watch6、美化展示信息
webpack --colors7、找出詳細的錯誤信息
webpack --display-error-details8、使用webpack.config.prod.js配置文件來打包
webpack --config webpack.config.prod.js六、開發環境
上面都是修改完文件，執行命令后，直接打開index.html，手動刷新看效果。
這里介紹的webpack-dev-server可以實現自動刷新，它是一個小型的Node.js Express靜態文件服務器，使用webpack-dev-middleware來服務于webpack的包，安裝及使用方法如下。
1、安裝和使用
A、安裝webpack-dev-server
B、在app目錄中執行webpack-dev-server
webpack-dev-server如果自動刷新，可以這么做，不要--hot。
webpack-dev-server --inlineC、在瀏覽器打開http://localhost:8080/
可以瀏覽項目中的頁面和編譯后的資源輸出。
也可以通過命令打開瀏覽器，寫法如下：
webpack-dev-server --open webpack-dev-server && open http://localhost:8080 -a 'google chrome'注意：webpack-dev-server生成的bundle.js包并沒有放在真實目錄中，而是放在了內存中。
2、兩種模式
webpack-dev-server支持兩種模式來自動刷新頁面，分別是iframe模式和inline模式，這兩種模式都支持熱模塊替換，好處是只替換更新的部分，而不是頁面重載。
A、iframe模式
B、inline模式
這種模式，url不用變化，但是需要配置。
先配置webpack.config.js文件，可以參考官網
每次敲一長串命令，是不是有些麻煩呢？配置一下package.json文件即可。
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "webpack","server": "webpack-dev-server --open","build": "webpack-dev-server --inline" }npm run start 替代 webpack
npm run build 替代 webpack-dev-server --inline
運行npm run build來編譯生成生產模式下的bundles；
運行npm run dev來生成開發模式下的bundles以及啟動本地server。
webpack打包輸出真實的文件，而webpack-dev-server開啟服務輸出的文件只存在于內存中，不輸出真實的文件！
做過一些嘗試后，你會發現webpack比較靈活，webpack.config.js和package.json對于運行項目來說，都很有用。而且，webpack.config.js文件中的參數發揮的作用等價于package.json文件中的scripts條款，如果不想在命令中拼接太多參數，可以配置webpack.config.js。
七、打包原理
在入口文件中，對每個require資源文件配置一個id。對于同一個資源，不管require多少次，它的id都是一樣的，所以無論在多少個文件中require，它都只會打包一份。
轉載于:https://www.cnblogs.com/camille666/p/webpack.html
總結
以上是生活随笔為你收集整理的webpack那些事儿的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到之前男朋友怎么回事
- 下一篇： 梦到牙有洞是怎么回事