webpack进阶--打包
上一片博文主要讓大家了解下究竟webpack是干什么的，明顯它是專(zhuān)注于打包的。
gulp 和 webpack 的區(qū)別
gulp，要求我們一步步寫(xiě)task（es6編譯、css壓縮、圖片壓縮、打包...），全過(guò)程都是我們掌控的（一開(kāi)始項(xiàng)目小的時(shí)候，我們覺(jué)得靈活，但是后來(lái)項(xiàng)目復(fù)雜度上來(lái)了，我們覺(jué)得這樣寫(xiě)task也太惡心了）。
webpack，只要寫(xiě)好配置文件，就會(huì)幫我們處理好各種零散的html、css、js（這里包括它們的預(yù)編譯語(yǔ)言例如jade、sass、es6、typescript等）,然后打包成一個(gè)js文件。
gulp和webpack最明顯的區(qū)別就是webpack自動(dòng)化程度更高，不用自己寫(xiě)各種各樣的稀奇古怪的task。
使用：
1.安裝
webpack和gulp一樣都要先全局安裝一次，再在項(xiàng)目安裝一次：
npm i webpack -g
npm i webpack -D
ps:全局安裝是為了能獲取本地模塊
2.配置文件
默認(rèn)配置文件名：webpack.config.js
如果想用其他名字例如：1.config 調(diào)用webpack時(shí)請(qǐng)用 webpack --config 1.config
//webpack.config.js
const path = require('path');
//一個(gè)入口對(duì)一個(gè)最終打包的js
//單入口寫(xiě)法
module.exports = {
entry: './src/script/main.js',
output: {
path: path.solve('./dist'),
filename: 'bundle.js'
}
}
-----------------------------------------------------------------------------------------------------
//多個(gè)平行依賴(lài)入口寫(xiě)法，最終會(huì)打包在一起
module.exports = {
entry: ['./src/script/main.js','./src/script/main2.js','./src/script/main3.js'],
output: {
path: path.solve('./dist'),
filename: 'js/bundle.js'
}
}
-----------------------------------------------------------------------------------------------------
//多入口寫(xiě)法，最終會(huì)打包多個(gè)文件
//[name] 這里是page1 page2
//[hash] 這個(gè)每次打包生成的一個(gè)hash（簽名）值
//[chunkhash] 這個(gè)是每個(gè)打包文件的md5 hash
module.exports = {
entry: {
page1 :'./src/script/main.js',
page2 :'./src/script/main2.js'
},
output: {
path: path.solve('./dist'),
filename: 'js/[name]-[chunkhash].js'
}
}
3.生成index.html(自動(dòng)插入打包好的js文件)
之前的文件都不能自動(dòng)將打包文件放入index.html中,所以我們要借助新的插件html-webpack-plugin(需安裝)
//webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
a:'./src/script/main.js',
b:'./src/script/main2.js'
},
output: {
path: path.solve('./dist'),
filename: 'js/bundle.js'
},
plugins:[
new htmlWebpackPlugin({
template: 'index.html', //以當(dāng)前目錄下的index.html為模板
filename: 'index-[hash].html',
inject: 'head',//默認(rèn)時(shí)body
hahaha: '自定義屬性的自定義內(nèi)容' ,//這個(gè)內(nèi)容可以在模板上用ejs語(yǔ)法調(diào)用，例如<%=htmlWebpackPlugin.options.hahaha%>
minify: { //壓縮html
removeCommet: true, //去注釋
collapseWhitespace: true //去空格
},
chunks:[a], //要入口js a
excludeChunks:[b] //不要入口js b chunks和excludeChunks隨便寫(xiě)一個(gè)就行
})
]
}
總結(jié)
以上是生活随笔為你收集整理的webpack进阶--打包的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 求上联:，，，，，下联:公心公物积百户之
- 下一篇： 民族习俗与家养动物有何联系