亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

output占位符[name]/[hash]/[chunkhash]

webpack --config webpack.dev.config.js指定配置文件

require('style-loader1css-loader!./style.css'); // reqiure配和css-loader加載css

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' // 命令行執行

webpack支持的引用方式

• ES6的模塊化

• commonJS

• AMD

require js 屬于commonJS

webpack? 要打包的文件.js? 打包后的文件.js--module-bind 'css=style-loader!css-loader'? ? ?//js解析css依賴的loader

--watch? ? ? ? ? ? ? ? ?//自動打包

webpack hello.js hello.buind.js--module-bind'css=style-loader!css-loader'--watch

html-webpack-plugin

css 自動加前綴 ===> postcss-loader

css-loader?importLoader=1

對css樣式中引入的圖片文件（如設置背景的圖片）或在根目錄下的index.html中通過img標簽引入的圖片進行打包：

圖片路徑設置為相對路徑如：./../img.jpg

安裝file-loader：npm install file-loader --save-dev

添加loader：

最后再打包

在模板中引用圖片：除了安裝和配置loader方法一樣時，注意在模板中引用圖片的路徑要進行特殊的設置，如下：

打包后圖片輸出的其他設置：

url-loader的使用：

使用場景：當文件大小大于了設置的限制大小，則圖片就交由file-loader進行處理；當圖片大小低于限制大小，就會將圖片轉為base64編碼，不再是一個url(不再是一個http請求)，圖片會被打包進html,css,js

如何使用：

首先安裝：npm install url-loader --save-dev

引用：

兩種打包方式的比較：

1. 通過http請求load進來。瀏覽器會有緩存，比較適用于重復性較高的圖片。

2. 打包成base64。任何地方要用時，都會有base64編碼存在那里，會造成代碼的冗余，增加代碼的體積。

圖片壓縮 image-webpack-loader：將圖片進行壓縮之后在進行url或file-loader的處理

安裝：npm install image-webpack-loader --save-dev

使用：

此外：image-webpack-loader還有很多關于png.jpg等圖片文件優化處理的設置，具體可以查看github上的image-webpack-loader官網可以看到

對模板進行打包：將模板處理成一個字符串賦值給一個對象的某個屬性，再返回這個對象，最后通過對象的屬性就可調用這個模板

webpack和npm run webpack的區別：前者是webpack默認的基本命令，后者是執行package.json里面的scripts標簽。

html-loader可以處理webpack中的HTML模板?

?1.安裝：npm install html-loader --save-dev?

?2.配置：{ test:/\.html$/, loader:'html-loader' }?

?3.app.js中引入并初始化：

?import './css/common.css';

?import Layer from './components/layer/layer.js';?

?const App = function() {

????????var dom = document.getElementById('app');?

?????????var layer = new Layer();?

?????????dom.innerHTML = layer.tpl;?

?}?

?new App();?

?注意事項：

1. html-webpack-plugin 會和 html-loader沖突，如果引入html-loader 會導致<%=htmlWebpackPlugin.options.title %> 編譯不出。

2. inject: 'body'不能寫成head,那樣獲取不到app這個id,因為<div id='app'></div>是在body中。

3. 編譯后不會再 ./dist/index.html中顯示，但在瀏覽器中可以顯示。

webpack的tpl模板支持ejs語法，?

?1.ejs安裝：cnpm install ejs-loader --save-dev?

?2.配置：{ test:/\.tpl$/, loader:'ejs-loader' }?

?3.寫法：?

?????????<h1>study hard! my name is <%=name%></h1>?

?????????<%for(var i=0;i<arr.length;i++){%>?

?????????<%=arr[i]%>?

?????????<%}%>?

?4.傳參：dom.innerHTML = layer.tpl({ name:'xiaohe', arr:['oppo','huawei','xiaomi'] });

處理less文件，要安裝less-loader:（將less轉化為css）

npm install less-loader --save-dev

(loader的處理方式是從右到左，為loader屬性設置一串的loader值后，會首先處理最右邊的loader)

使用配置如下：

以上配置打包后，就可將less文件轉化成css并通過style標簽引入到打包后的index.html頭部了，且less中兼容性不好的屬性也會經過postcss的處理自動添加上前綴

如果在less文件中使用了@import引入了其他less文件，當通過上述設置直接打包后，被引入模塊同樣也會經過postcss的處理，這跟處理css文件是有區別的

如果使用了sass文件，同樣也是先安裝再使用

npm i sass-loader --save-dev

添加css-loader和style-loader（使得打包后在index.html文件頭部會添加style標簽引入打包后的css文件）處理css文件

當css文件中有一些瀏覽器支持不是很好的屬性設置的時候比如flex，我們可能需要為其添加不同的前綴，此時可以使用webpack為這些兼容性不好的屬性進行統一處理（如加前綴，這是該loader的一個插件功能，還有很多其他的插件可以添加實現更多的功能），通過使用postcss-loader（npm官網有詳細解釋）：

第一步安裝loader??npm install postcss-loader --save-dev? 如果統一進行加前綴處理的話，要進行一下安裝autoprefixer 插件??npm install autoprefixer --save-dev

第二步使用：

經過處理后的屬性打包結果如下：

當css文件中使用了@import ‘路徑’引入了其他文件的css塊，經過webpack打包后，這一塊會經過css-loader和style-loader的處理，在index.html文件中頭部通過style標簽引入這一塊的樣式設置，但是它沒通過postcss為樣式添加前綴，解決方法如下：

如何為loaders中的include或exclude屬性設置絕對路徑值，這樣可以使打包速度加快：

使用預處理js的loader：babel（將es6等轉換為瀏覽器可以直接處理的JS）

第一步要安裝 命令行輸入npm i --save-dev babel-loader babel-core

第二步配置babel使其可以轉化指定版本的js，如es2015，使用presers進行配置? 指定完之后需安裝?npm i --save-dev babel-preset-latest

第三步 使用loader并進行相關配置

除了直接在loader使用的時候配置babel，也可以在package.json中進行babel的配置如下：

loader其他參數講解：exclude（設置不需要處理的文件的目錄）、include（需要使用該loader去處理的文件目錄，只打包該目錄下的文件）、loaders(loaders是數組類型的一連串loader，不再是單個字符串類型的單個loader)