loaders:在webpack裡面是一個很重要的功能 表示加載器、轉換器
通常情況下,webpack隻對js檔案提供支援,但是比如說less/sass/css/ES7等就不認識了,這時候就需要使用loaders來幫助它轉化了.
接下來聊聊CSS的處理吧
這時就需要借助style-loader和css-loader了
我們在src下建一個css目錄,然後建一個a.css檔案
//index.html
<!DOCTYPE html>
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root">aaaa</div>
</body>
//a.css
body {
background: #ccc;
}
-我們在index.js檔案裡面引入a.css
// index.js
import './css/a.css';
document.write('welcome');
處理css檔案
這時是報錯的,我們是要使用loader的,處理css檔案我們需要使用到
style-loader
css-loader
1.安裝style-load css-loader
cnpm i style-loader css-loader -D
2.配置
首先我們寫一個module,在裡面rules(規則),rules是一個數組,裡面可以寫一條一條的規則
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const CleanWebpackPlugin = require('clean-webpack-plugin');
const Webpack = require('webpack');
module.exports = {
entry:{
entry: './src/index.js'
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name]-bundle.js'
},
module:{ //我寫一個module
//配置一個rules(規則),rules是一個數組,裡面包含一條一條的規則
rules:[
{
// test 表示測試什麼檔案類型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:['style-loader','css-loader']
}
]
},
devServer:{
contentBase:path.resolve(__dirname,'dist'), //最好設定成絕對路徑
host:'localhost',
port:8090,
open:true,
hot:true
},
plugins:[
new Webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title:'Hello World',
template: './src/index.html' //模闆位址
})
]
}
這時候我們運作 npm run dev,我們發現css生效了.
上面我們使用的是use的寫法,我們也可是使用loader的寫法,效果是同樣生效的
module:{ //我寫一個module
//配置一個rules(規則),rules是一個數組,裡面包含一條一條的規則
rules:[
{
// test 表示測試什麼檔案類型
test:/\.css$/,
// 使用 'style-loader','css-loader'
loader:['style-loader','css-loader']
}
]
},
同時還有第三種寫法,css-loader一定要放在後面,因為是先用css-loader在插入到style标簽裡面
module:{ //我寫一個module
//配置一個rules(規則),rules是一個數組,裡面包含一條一條的規則
rules:[
{
// test 表示測試什麼檔案類型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:[
{loader:'style-loader'},
{loader:'css-loader'}
]
}
]
},
總結loader的三種寫法
1.use:['xxx-loader','xxx-loader']
2.loader:['style-loader','css-loader']
3.use:[
{loader:'style-loader'},
{loader:'css-loader'}
]
一般簡單的用第一種,涉及參數配置的用第三種
如何壓縮js
打包完以後，JS需要壓縮上線
1.在webpack4.x版本中
2.之前版本是如何做到的
使用uglifyjs-webpack-plugin
如果我們希望通過插件的形式壓縮,那麼我需要
1.安裝
cnpm i uglifyjs-webpack-plugin -D
2.引入插件
const Uglify = require('uglifyjs-webpack-plugin');
3.使用ugliufy()
new ugliufy()
-
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Webpack = require('webpack');
//onst Uglify = require('uglifyjs-webpack-plugin');
module.exports = {
entry:{
entry: './src/index.js'
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name]-bundle.js'
},
module:{ //我寫一個module
//配置一個rules(規則),rules是一個數組,裡面包含一條一條的規則
rules:[
{
// test 表示測試什麼檔案類型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:[
{loader:'style-loader'},
{loader:'css-loader'}
]
}
]
},
devServer:{
contentBase:path.resolve(__dirname,'dist'), //最好設定成絕對路徑
host:'localhost',
port:8090,
open:true,
hot:true
},
plugins:[
// Uglify是壓縮js,現在已經不需要了,隻需要在script裡面寫成
// "build": "webpack --mode production", 就自動壓縮了
//new Uglify(),
new Webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title:'Hello World',
template: './src/index.html' //模闆位址
})
]
}
![從事C#上位機開發，沒前途[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)