vue之loader處理靜態資源
webpack 是利用loader 來處理各種資源的，wepback的配置基本上就是為各種資源文件，指定不同類型的loader。
1，處理css
最基本的css 處理loader 是css-loader , style-loader. css-loader 處理的是css 中的@import 和url, 根據路徑(相對路徑)找到相應的資源，但它不處理具體的資源，比如，img, 是由file-loader或url-loader 來處理的，這個以後再說. style-loader則是把打包後的css文件插入到html中，具體的方法是，它會生成一個內聯的style 標簽，然後把css註入到這個style標簽中，它實現了模塊熱更新，修改css樣式的時候，頁面不會強制刷新，就能看到變化。那就npm install css-loader style-loader --save-dev 安裝它們。 安裝完成後，在webpack中進行配置。配置文件中有一個module屬性，module 屬性下面有一個rules 屬性，它是一個數組，loaders 的配置寫在它的裏面，每一個配置項都是一個對象，指明要處理哪種文件，使用哪一種loader, 最簡單的配置如下
const htmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
module: {
rules: [
{
test: /\.css$/, // 正則表達式，指明要處理的文件類型
use: [‘style-loader‘, ‘css-loader‘] // 處理資源所使用的loader, 要註意loader的順序，從右向左執行
}
]
},
devServer: {
contentBase:‘build‘,
proxy: {
‘/api‘: ‘http://102.03.34.58/api‘
},
port: 9000, // 設置端口號
stats: ‘errors-only‘, // 只有產生錯誤的時候，才顯示錯誤信息，日誌的輸出等級是error.
overlay: true // 當有編譯錯誤的時候，在瀏覽器頁面上顯示。
},
plugins: [
new htmlWebpackPlugin()
]
}
寫一點css樣式，看配置有沒有生效，在src 目錄下，新建一個css文件夾，裏面寫一個style.css文件，隨便寫一點樣式，
body {
background: blue;
}
然後在index.js 中引入import ‘./css/style.css’.
// 引入css 樣式 import ‘./css/style.scss‘; import component from ‘./component‘; document.body.appendChild(component())
npm run dev 啟動服務器，可以看到頁面有了背景色，這時我們可以隨便更改body的背景色，頁面也會時時做出了變化，非常方便開發。
當然，你可能使用css 預處理器， less, sass stylus等， 這也簡單，安裝相應的loader 就可以了，
less: npm install less less-loader --save-dev,
sass： npm install node-sass, sass-loader --save -dev,
stylus, npm install stylus, stylus-loader --save-dev,
然後在use中增加一條相應的loader
rules: [
{
test: /\.css$/, // 正則表達式，指明要處理的文件類型
use: [‘style-loader‘, ‘css-loader‘] // 處理資源所使用的loader, 要註意loader的順序，從右向左執行
},
{
test: /\.less$/,
use: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘]
},
{
test: /\.scss$/,
use: [‘style-loader‘, ‘css-loader‘, ‘sass-loader‘]
},
{
test: /\.styl$/,
use: [‘style-loader‘, ‘css-loader‘, ‘stylus-loader‘]
}
]
最後再來說一下PostCSS, 它的配置稍微麻煩一點，因為PostCSS是由插件來起作用的，使用哪個功能，就要安裝哪個插件，如果只安裝postcss-loader, 它並不起作用，這和babel-loader一樣， 比如要使用添加瀏覽器廠商前綴的功能, 在安裝postcss, postcss-loader 後，還要安裝對應的插件autoprefixer , npm install postcss, postcss-loader, autoprefixer --save-dev. 安裝完成後，就要進行配置。對於純css 來說，我們最先使用postcss-loader, 所以postcss-loader要放到最右邊，但是又不能只寫一個postcss-loader 放在那裏，因為它自己不起作用，需要對postcss-loader進行配置。配置的方式有兩種，一種是在webpack的配置文件中，一個是單獨給postcss寫一個配置文件。
如果在wepback的配置文件中配置postcss-loader，那postcss-loader 就不能是一個字符串了，要是一個對象， loader屬性 是我們指定的loader, options 就是我們指定的配置項，對於postcss-loader 來說，它的配置項是plugins, 使用到的插件， 是一個函數，返回一個數組，數組中就包括用到的插件。
{
test: /\.css$/,
use: [‘style-loader‘, ‘css-loader‘,
{ // 使用對象對postcss-loader進行配置，對象有兩個屬性loader, options
// loader屬性就是指定使用的loader, options 就是該loader的配置項，也是一個對象
loader: ‘postcss-loader‘,
options: {
plugins: () => ([
require(‘autoprefixer‘)()
])
}
}
]
}
但是當我們使用很多插件進行開發，這樣在配置文件中進行配置就很麻煩了，也會導致配置文件比較龐大，這時就要使用PostCSS配置文件，它的配置文件有很多格式，json, yml, js的都可以，有興趣的可以看一下官方文檔。我在這裏就使用postcss.config.js. 在項目根目錄下建立一個postcss.config.js 文件，它的格式如下，module-export 出一個帶有plugins屬性的對象。plugins屬性也是一個對象，屬性名就是使用的插件的名稱，屬性值是一個對象，對這個插件的配置。
module.exports = {
plugins: {
"autoprefixer": {
browsers: [
// 加這個後可以出現額外的兼容性前綴
"> 0.01%"
]
}
}
}
使用配置文件後，webpack的配置文件還原到以前的狀態，
{
test: /\.css$/,
use: [‘style-loader‘, ‘css-loader‘, ‘postcss-loader‘]
}
現在在style.css中給body, 添加box-sizing: border-box; 看一下效果。
body {
background: blue;
box-sizing: border-box;
}
打開瀏覽器控制臺，可以看到添加了webkit- 的瀏覽器廠商前綴。
當使用css 預處理的時候，它要放到預處理器loader 的後面, 也就是說，先使用預處理器loader, 再使用postcss-loader. 當然配置還是一樣的。以scss 為例
{
test: /\.scss$/,
use: [‘style-loader‘, ‘css-loader‘, ‘postcss-loader‘, ‘sass-loader‘]
}
但是這裏會存在一個問題，就是當樣式文件中，有@import 的時候，你會發現postcss-loader 並沒有起對import 進來的文件起作用，這時在css 文件夾中，再建一個文件夾，box.css
div {
display: flex;
width: 200px;
height: 200px;
border: 1px solid blue;
}
然後在style.css 裏面@import 引入box.css;
/* @import 語句結尾要加分號 */
@import url(box.css);
body {
box-sizing: border-box;
}
打開瀏覽器控制臺，找到div.css的樣式，你會發現display:flex 並沒有加前綴。
這時要給css-loader 設置一個屬性，importLoaders, 它的值為一個數字，表示css-loader 前面有幾個loader 要處理，對於純css來說，它前面有一個loader, postcss-loader, 所以importLoaders 的取值為1.
{
test: /\.css$/,
use: [‘style-loader‘,
{
loader: ‘css-loader‘,
options: {
importLoaders: 1
}
},
‘postcss-loader‘]
}
但是對於css預處理器來說，css-laoder 前面有個loader, postcss-loader 和預處理器loader,所以importLoaders的取值為2.
{
test: /\.scss$/,
use: [‘style-loader‘, {
loader: ‘css-loader‘,
options: {
importLoaders: 2
}
}, ‘postcss-loader‘, ‘sass-loader‘]
}
2，處理圖片
處理圖片主要用到兩個loader: url-loader style-loader. url-loader的作用是把圖片轉化成base64編碼的字符串，然後內嵌到到js文件中。 file-loader 則是把圖片打包成一個個單獨的圖片文件，並返回它們的路徑。但是這裏有一個問題，我想把小的圖片內嵌到js中， 大的圖片打包成一個個單獨的文件，怎麽辦？這時需要對url-loader進行配置，它有一個limit屬性，取值為多少k， 表示的意思時，當小於limit時，直接把圖片打包到js中，當大於limit時，就使用file-loader 打包成一個單獨的文件，當然我們也可以給打包成的圖片起一個名字，那就要配置name屬性，當使用file-loader 生成圖片的時候，它會生成一個MD5 的hash值，我們可以利用這個hash值給文件命名，name: “[name].[hash].[ext]”， name： 要打包的圖片以前的文件名，hash file-loader 生成的hash值，ext, 打包後的圖片以前的後綴名。當然，我們想把圖片統一打包到一個文件夾中。可以name 放一個文件夾名 ‘img/[name].[hash].[ext]’
{
test: /\.(jpg|png|svg)$/,
use: {
loader: ‘url-loader‘,
options: {
limit: 2000,
name: ‘/images/[name].[hash].[ext]‘
}
}
}
3，處理字體
Fonts 的處理方式和image的處理方式一致，也是url-loader, file-loader,
{
test: /\.(ttf|eot|woff|woff2)$/,
use: {
loader: "url-loader",
options: {
limit: 50000,
mimetype: "application/font-woff",
name: "./fonts/[name].[ext]"
}
}
}
4, 處理js
js的處理用到的loader 是babel-loader，babel-loader 要依賴@babel/core, 現在babel升級到7了，以前的babel-core 要改成@babel/core, 感覺babel 7 是把babel 所有功能都放到了@babel的命名空間下，所有的presets 和plugins 都以@babel 開始，然後是/， 最後才是相應的preset或plugin. 先安裝上babel-loader @babel/core再說, npm install babel-loader @babel/core --save-dev 然後在webpack的配置文件中配置一下，
{
test: /\.js$/,
loader: ‘babel-loader‘
}
這時執行一下npm run build, 你會發現有兩個問題，一是打包非常慢，因為 webpack 進行打包的時候，會把所有的js代碼都會打包一下，包括node_modules 下面的代碼，但是node_modules下面的代碼根本就沒有必要進行打包，所以要排除掉, 要用到 exclude 配置項，我覺得使用include 更好，include是表示要打包的代碼，我們書寫的代碼在src下面，所以include 配置成src 目錄就可以了。
{
test: /\.js$/,
loader: ‘babel-loader‘,
include: path.join(__dirname, ‘src‘),
exclude: path.join(__dirname, ‘node_modules‘),
}
二是打包後的代碼和以前的代碼並沒有多少不同？這是因為@babel/core 本身不起作用，而是要依賴插件，一個一個插件寫起來太麻煩，所以babel 提供了插件的集合preset, 安裝
vue之loader處理靜態資源