webpack的使用方法

我經常使用的webpack版本是3.8.1版本

http://www.javashuo.com/article/p-fbsavghk-bc.html   

這個是他的網址

那麼咱們說一下webpack，他是一個前端資源加載或打包的工具，他能夠打包：img，css，js，json等

第一步：下載

　　npm  install  -g  webpack@3.8.1 

　　npm install  webpack@3.8.1  --save -dev 局部下載

　　儘可能全局和局部都安裝　　

第二步

　　打包js文件

　　　　指令webpack入口文件(要被打包的文件)   出口文件(要打包到的文件)

　　　　        例如：            webpack js/a.js      dist/bundle.js

　　　　　　若是咱們只想使用webpack這個指令就進行打包的話，就須要配置webpack.config.js

　　　　webpack會有一個默認的配置文件叫webpack.config.js

　　　　指令就是簡單的webpack就能夠了

第三步

　　　添加熱加載      改變文件內容    按住保存    就會自動刷新

　　webpack-dev-server@2.9.4

　　注意:webpack是3.8.1這個輕量級服務器就得是2.9.4若是webpack是4.0版本，這個dev-server就得是3.0版本

　　　全局下載webpack-dev-server     npm install  -g    webpack-dev-server@2.9.4

　　在開發環境下載   npm i --save-dev  webpack-dev-server@2.9.4

　　　　直接使用webpack-dev-server啓動就OK了

　　　　可是這種方式只能開啓服務器，可是不能自動刷新

　　　　另外一種啓動webpack-dev-server  --hot   --inline

　　　　既能夠啓動服務器  也能夠讓瀏覽器自動刷新

　　　　配置啓動指令

　　　　　　在當前項目下的package.json寫

　　

　　　　注意的就是在這個服務器下載生成的虛擬bundle.js

　　　　這個虛擬js文件由配置文件決定的。可是他是和app.html同目錄級別關係。因此引入關係須要注意

　　

　　打包css文件

　　　　loader:依賴包

　　　　css轉成js less轉成js

　　　　Json轉成js png轉成js    而loader   就解決這些問題的

　css文件打包到js中，須要css-loader  style-loader

 

　　　　處理json文件

　　　　　　下載json-loader    npm i --save-dev   json-loader

　　　　　　在配置文件添加依賴模塊

　　　　

 　　　　　　處理圖片

　　　　npm i --save-dev url-loader       還須要npm install file-loader --save-dev

　　　　

　　　　　處理js針對es6

　　　　　　須要學習babel   這個babel模塊專門將es6語法解析成es5格式

　　　　　　npm i --save-dev   babel-loader  @babel/core  @babel/preset-env webpack

　　　　　　或者

　　　　　　　

　　　　　　

　　　　　　在webpack中輸入指令npm run dev 後會自動啓動一個瀏覽器

　　　　　　須要借鑑插件open-browser-webpack-plugin      --save-dev