webpack專案流程學習（二）
本文只是作為學習webpack入門所作的筆記，僅供參考。閱讀本文之前，請首先閱讀webpack專案流程學習（一）；
專案測試
我們試做一個專案測試,適用laoder 以及其特性處理專案中的資原始檔；
重新配置檔案
配置目錄為下
檔案中內容為：
layer.html
<div class="layer">
<div>this is a layer</div>
</div>layer.js
//import tpl from './layer.html';
function layer (){ layer.less
.layer {
width: 600px;
height: 400px;
background-color: #ff0;
.>div{
width: 600px;
height: 300px;
background-color: #f00;
}
}app.js
引入 layer.js檔案 執行
import layer from './components/layer/layer.js' 使用babel-loader轉換ES6
使用babel 把es6的語法解析成瀏覽器支援的語法
首先需要安裝需要支援的loader外掛
安裝loader 和 core 的外掛
npm install --save-dev babel-loader babel-core 安裝 babel-preset-latest
npm install --save-dev babel-preset-latestwebpack.config.js
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/app.js',
output:{
path:'./dist',
filename:'js/[name].bundle.js',
},
module:{
loader:[
{
test:/\.js/,
loader:'babel-loader',
query:{
presets:['lastest']//告訴babel 執行js的
}
}
]
},
plugins:[
new htmlWebpackPlugin({
filename:'index.html',
template:'index.html',
inject:'body',
})
]
}配置檔案設定 entry, output以及module 模組 ，模組打包 的loader的打包工具以及執行js的版本
// query:{
// presets:['lastest']//告訴babel 執行js的
// }上邊的程式碼也可以設定在package.json 中為（作用相同）：
"babel":{
"presets":["latest"]
},說明： 使配置告訴webpack，處理檔案通過babel-loader，並且 處理是以 'presets":["latest"]' 版本
現在 執行一下 npm run webpack 會在dist 檔案中生成index.html和js下的 main.bundle.js 檔案
在瀏覽器開啟 在console 下會顯示：
function layer(){
return {
name:'layer',
tpl:tpl
};
}
表示頁面 順利執行 開啟，我們可以在修改html app.js layer.js裡邊的檔案 執行 都可以顯示出效果
選擇性打包
為了加快打包執行的速度 ，選擇性打包，我麼可以在module 中設定 引數 ：
exclude:'./node_modules/',//不包含打包的範圍 優化打包速度
include:'./src',//包含打包的範圍 優化打包速度此時 雖然include 加快了速度 , 但是 exclude 卻沒有起作用 ，這時我們需要把之前的路徑改為絕對路徑：
include:path.resolve(__dirname,'src/'),
exclude:path.resolve(__dirname,'node_modules/'),這樣就加快了執行命令的速度
使用打包css
首先 要安裝 css-loader 和 style-loader
npm i style-loader css-loader --save-dev然後在src-->css下邊 新建common.css檔案，在裡邊書寫一些樣式 便於觀察 ，
然後在app.js中頭部引用common.css檔案
import './css/common.css';在配置檔案 webpack.config.js中的module下新增 css loader:
,
{
test:/\.css$/,
loader:'style-loader!css-loader'
}執行命令npm run webpack，開啟瀏覽器 可以看見瀏覽器內聯樣式
css 後處理
平時寫樣式我們不只侷限與css ,有時會寫預載入樣式 如sass,less,以及為了瀏覽器相容，我們需要新增字首，此時我們只要 安裝一個postcss-loader 就可以實現 自動新增 瀏覽器字首 -webkit- ，-moz-，-ms-,-o-;相關引數可以檢視postcss-loader
npm install postcss-loader --save-devnpm install autoprefixer --save-dev然後在loader 後邊新增!postcss-loader (loader 是從右到左載入的)
1.新增 autopredixer ，在 module 後邊 新增postcss(此方法以失敗)
2.首先 引入webpack(參考imooc下邊評論)
var webpack = require('webpack');
在plugin下邊新增
,
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
require("autoprefixer")({
browsers: ["last 5 versions"]
})
]
}
})如果css 頁面有引入檔案 @import，如：
@import "./flex.css";則需要在配置檔案的 loader處設定處理：
loader:'style-loader!css-loader?importLoaders=1!postcss-loader'其中=後邊的1表示有1個引入檔案 ，如果需要引入多少個檔案，則設定數字為引入的數量
處理.less/.sass檔案
在專案中處理.less檔案時，首先需要下載安裝less-loader
npm install less-loader --save-dev如果本機沒有less 支援，則需要首先安裝less
npm install less安裝完成後 可以在module 設定 loader
,
{
test:/\.less$/,
loader:'style!css!postcss!less'
}注意 postcss需放在css! 與less之間
以上的less 同樣可以適用 @import與postcss 的後處理 輸出的檔案同樣添加了字首
sass 的原理與less 相同 只需要把less改為sass 即可
注意：安裝 sass-loader 時 需要安裝 node-sass （建議vpn安裝，或者使用淘寶映象）
npm install node-sass/node-less處理專案中的模板檔案
使webpack把模板檔案當做一個字串處理
首先 安裝HTML的模組 ： html-loader
npm install html-loader --save-dev
在 layer.js中 引入layer.html檔案
import tpl from "./layer.html";在app.js引入layer.js 檔案，在在HTML中輸出
import Layer from './ components/layer/layer.js'
const App = function (){
console.log(Layer);
var dom = document.getElementById('#app');
var layer = new Layer();
dom.innerHTML = layer.tpl;//引入 layer.js 中 的tpl
}
new App();
在index.html中新增#app標籤
現在 執行 命令npm run webpack 在瀏覽器就可以看見layer模板的 檔案，此時 任意更改模板檔案都可以
如果我們使用模板檔案.ejs的檔案 怎麼可以先安裝ejs-loader 模板引擎
npm install ejs-loader --save-dev然後我們在loader裡邊新增 ejs-loader
,
{
test:/\.ejs/,
loader:'ejs-loader'
}然後 我們可以在.ejs書寫ejs程式碼
<div class="layer">
<div>this is <%= name %> layer</div>
<% for(var i = 0;i<arr.length;i++){ %>
<%=arr[i]%>
<%} %>
</div>
此時 在layer.js裡邊引入的檔案應該改為.ejs的模板檔案
在app.js 檔案中可以插入js呼叫引數
dom.innerHTML = layer.tpl({
name:'john',
arr:['apple','xiaomi','oppo']
});此時執行命令後，在瀏覽其裡邊就可以看見模板程式碼的引入和js程式碼的計算結果
也可以書寫.tpl字尾的格式的模板檔案
處理圖片以及其他檔案
首先先安裝圖片loader
1. file-loader（檢視相關資料可看官網 ）
npm install file-loader --save-dev在配置檔案中 進行loader配置：
,
{//loader img
test:/\.(png|jpg|gif|svg)$/,
loader:'file-loader'
}把所有的圖片格式包含裡邊
然後在 css/less/sass中引入圖片檔案背景時 ，可以使用絕對路徑、設定的cdn路徑、也可以直接使用相對路徑
{
background-image: url(../../assets/1.jpg);
}在 index.html 中也可以直接引用
<img src="./src/assets/1.jpg" alt="">但是在模板檔案中就不能直接使用相對路徑，我們做一些 修改，可以像是nodes.js那樣引入檔案
在圖片src中以這種形式新增圖片：
<img src="${ require('檔案的相對路徑') }" alt>如：
<img src="${ require('../../assets/1.jpg') }" alt="">然後開啟生成的檔案 就會看見引入的圖片了
- 為了使圖片能同意在一個圖片資料夾中，我們可以設定query值 name
在file-loader中設定
路徑為： 圖片資料夾名/圖片名稱-5位hash值.檔案格式
,
{//loader img
test:/\.(png|jpg|gif|svg)$/,
loader:'file-loader',
query:{
name:'assets/[name]-[hash:5].[ext]'
}
}2. url-loader
類似於file-loader , 都可以處理圖片以及檔案 ，但是我們可以指定一個limit ，當處理時檔案/圖片大小大於limit設定後，會把檔案交於file-loader 處理，小於指定的大小後，則會把圖片/檔案處理成base:64位的編碼
安裝 url-loader
npm install url-loader --save-dev測試：我們把剛才的file-loader 改為url-loader ,在query中新增一個limit值，設定limit大小
,
{//loader img
test:/\.(png|jpg|gif|svg)$/,
loader:'url-loader',
query:{
limit:50000,
name:'assets/[name]-[hash:5].[ext]'
}
}然後打包一下 就會看見，我們的圖片檔案如果大於設定的limit：50000,50k時，會直接把圖片loader進來，如果檔案沒有50k大師，怎會處理成base:64位的編碼
3. 圖片壓縮 – image-webpack-loader
首先先安裝
npm install image-webpack-loader --save-dev然後我們修改loader 為：
{//loader img
test:/\.(png|jpg|gif|svg)$/,
// loader:'url-loader',//loader 可省略
// query:{
// limit:300000,
// name:'assets/[name]-[hash:5].[ext]'
// }
loaders:[
'url-loader?limit=300000&name=assets/[name]-[hash:5].[ext]',
'image-webpack-loader'
]
}上邊還是遵守loader的順序（從右到左），先是把圖片壓縮，壓縮後的圖片再交給url-loader 判斷 是否大於limit值，大於直接交給file-loader 引入，如果在範圍之內就把圖片轉成base：64位的編碼