webpack 二次總結
前言:在6月份的時候寫了一個關於vue-cli的webpack探究,當時似懂非懂,現在回過頭來,感覺還是欠缺不少,這次看了技術胖的部落格,感覺受益匪淺
技術胖部落格
1:webpack介紹
webpack 模組打包機
目的:分析你的目錄介面,找到JavaScript模組以及其他一些瀏覽器不能直接執行的拓展語言,將其打包和轉換為合適供瀏覽器使用的格式。webpack還有優化功能
打包:多個js檔案打包為一個檔案
2:入口與出口檔案
webpack.config.js 這是webpack的配置檔案。
module.exports={
entry:{} //入口檔案
output:{} //出口檔案
module:{} //模組,負責載入css,js等轉換壓縮
plugins:[], //外掛
devServer:{} //負責伺服器搭建
}
3:css打包
webpack是為了把所有打包為一個js,用來減少http請求數量。
這裡就要用到loaders配置
解析css 餘姚兩個包 style-loader,css-loader
style-loader:處理css中url
css-loder:處理插入css style的標籤
寫在webpack中的module中
module:{
rules:[
{
test: /\.css$/,
loader:['style-loader','css-loader']
}
]
}
ps:寫法有多種,這是常見的一種
4:js程式碼的壓縮
uglifyjs-webpack-plugin(JS壓縮外掛,簡稱uglify)
在webpack.config.js中引入
const uglify = require(“uglifyjs-webpack-plugin”)
在module中的plugins也要new一個uglify物件
plugins:[
new uglify()
]
由於開發環境和生產環境不同,在開發環境中對js是不進行壓縮的,所以一般在
webpack.config.js外還會有兩個js檔案dev.js,pro.js分別使用不同的js配置
5:打包html檔案
html-webpack-plugin
在webpack.config.js中引入它
const htmlPlugin = require(‘html-webpack-plugin’);
在plugins中進行引入配置
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
})
6:css中圖片處理
file-loader,url-loader
file-loader:解決引入路徑問題
url-loader:如果圖片過多會發出多個http請求,url-loader把圖片變成圖片編碼,生產dataURl
如果圖片較大,編碼會消耗效能。因此url-loader提供了一個limit引數,小於limit位元組的檔案會被轉為DataURl,大於limit的還會使用file-loader進行copy
module:{
rules:[
{
test:/\.(png|jpg|gif)/,
use[{
loader:'url-loader',
options:{
limit:500000
}
}]
}
]
}
7:css分離和圖片路徑處理
extract-text-webpack-plugin
引入
const extractTextPlugin = require(‘extract-text-webpack-plugin’);
同上還要在plugins裡面設定
new extractTextPlugin(‘…’);
module:{
rules: [
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},{
test:/\.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500000
}
}]
}
]
},
雖然分離出css,但是css的路徑有很多問題,可以使用
publicPath解決,在output中設定publicPath
//出口檔案的配置項
output:{
//輸出的路徑,用了Node語法
path:path.resolve(__dirname,'dist'),
//輸出的檔名稱
filename:'[name].js',
publicPath:website.publicPath
},
8:處理html中的圖片
在HTML頁面中會使用img標籤,用webpack外掛 html-withimg-loader解決
配置loader
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
9:css3 自動新增字首
PostCSS外掛
postcss.config.js在根目錄中
module.exports = {
plugins: [
require(‘autoprefixer’)
]
}
引入autoprefixer外掛,自動新增字首
然後在loader中配置
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
})
}
10:webpack中的babel
babel是什麼
babel是一個編譯js的平臺,轉義es6,es7,jsx的擴充套件語言
babel-core babel-loader babel-preset-es2015 babel-preset-react
這是babel的npm包
在webpack中配置babel方法
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude:/node_modules/
}
還要在根目錄下新建.babelrc檔案,並且配置
{
“presets”:[“react”,”es2015”]
}
11:webpack打包之後的除錯
Source Maps
配置
module.exports = {
devtool: ‘eval-source-map’,
entry: __dirname + “/app/main.js”,
output: {
path: __dirname + “/public”,
filename: “bundle.js”
}
}