歷程
第一次接觸webpack是在前些日子用Vue開發(fā)了一些簡(jiǎn)單demo（todoList）躏率，并且隨后又開發(fā)了本博客的一些功能，想用Vue組件文件開發(fā)爵政？碴裙，想用ES6語法钢悲？就必須上webpack了，其實(shí)之前對(duì)這構(gòu)建工具很是抵觸舔株，配置麻煩莺琳，搞一大堆文件看得頭暈?zāi)X脹，但又不得不用载慈，稍微用熟了一點(diǎn)之后惭等，特別是各種cli工具出來后，不得不說我之前的想法腦殘了办铡，真的是好用方便辞做。下面文章中總結(jié)一下我使用過程中遇到的坑和一些重要的配置。
關(guān)于模塊系統(tǒng)
Webpack可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源寡具。還可以將按需加載的模塊進(jìn)行代碼分隔秤茅，等到實(shí)際需要的時(shí)候再異步加載。通過 loader 的轉(zhuǎn)換童叠，任何形式的資源都可以視作模塊框喳，比如 CommonJs 模塊、 AMD 模塊厦坛、 ES6 模塊五垮、CSS、圖片杜秸、 JSON拼余、Coffeescript、 LESS 等亩歹。
而現(xiàn)在web前端這塊兒大部分都在使用ES6模塊
import "jquery";
export function doStuff() {}
module "localModule" {}
出入口文件配置
module.exports = {
entry:{
app:'./src/main.js'//入口文件
},
output: {
path:path.resolve(__dirname, '../dist'),//存放打包后文件的輸出目錄
publicPath:'/',//指定資源文件引用的目錄
filename: 'app.bundle.js',//打包文件名
},
說明：
- __dirname:node.js中的一個(gè)全局變量匙监，它指向當(dāng)前執(zhí)行腳本所在的目錄。
- publicPath:指定資源文件在哪個(gè)目錄引用小作，這個(gè)取決于你網(wǎng)站的根目錄（index.html所在位置）的位置亭姥，我此處設(shè)置為'/'，即表示資源文件在當(dāng)前目錄顾稀，這個(gè)在路徑引用的時(shí)候需要特別注意达罗。
- 如果想要build多個(gè)文件，在entry選項(xiàng)中加入就行静秆，如：
entry: ['./app.js', './utils.js']
使用別名
看如下配置：
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'vue$': 'vue/dist/vue',
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
"jquery": path.resolve(__dirname, '../node_modules/jquery/dist/jquery.slim.min.js'),
"bootstrap": path.resolve(__dirname, '../src/plugin/bootstrap'),
}
}
說明：
- extensions：用于指明程序自動(dòng)補(bǔ)全識(shí)別哪些文件后綴
- fallback：添加項(xiàng)目中的node_modules目錄到解析路徑中,防止模塊無法被找到粮揉，這個(gè)地方還有另一個(gè)設(shè)置同樣需要添加：
resolveLoader: {//此配置項(xiàng)和resolve平行
fallback: [path.join(__dirname, '../node_modules')]
}
- alias：它的作用是把用戶的一個(gè)請(qǐng)求重定向到另一個(gè)路徑，以便在其他文件中進(jìn)行引用的時(shí)候可以更方便抚笔，這個(gè)配置在插件和依賴以及靜態(tài)資源比較多的時(shí)候炒雞好用扶认，大大節(jié)省時(shí)間。
- path.resolve：使用前需要注意先在文件頭部引入path模塊：
var path = require('path')
Loader
Webpack 本身只能處理 JavaScript 模塊殊橙，如果要處理其他類型的文件辐宾，就需要使用 loader 進(jìn)行轉(zhuǎn)換，看如下配置：
module: {
noParse: [],
loaders: [
//css和sass分開加載
{ test: /\.scss$/,
loader: ExtractTextPlugin.extract(
"style-loader",
"css-loader!sass-loader?sourceMap",
{
// 圖片膨蛮、字體資源打包到css上級(jí)目錄
publicPath: "../"
}
)
},
{ test: /\.css$/,
loader: ExtractTextPlugin.extract(
"style-loader",
"css-loader?sourceMap",
{
// 圖片叠纹、字體資源打包到css上級(jí)目錄
publicPath: "../"
}
)
},
//vue
{
test: /\.vue$/,
loader: 'vue'
},
// babel處理es6
{
test: /\.js?$/,
exclude: [
node_modules
],
loader: 'babel'
},
// 圖片及字體打包
{
test: /\.(ttf|eot|svg|png|gif|woff(2)?)(\?.*?)?$/,
loader: "file-loader"
}
]
}
說明：
- ExtractTextPlugin：上面加載css和sass的時(shí)候用到ExtractTextPlugin，這是一個(gè)CSS文件單獨(dú)抽取的插件敞葛，可以生成便于開發(fā)環(huán)境測(cè)試的CSS source-map 并且減少DOM操作（因?yàn)樵趙ebpack默認(rèn)對(duì)css打包壓縮的處理中誉察，對(duì)css文件經(jīng)過處理之后是在js文件中然后通過在頁面的style中插入），在下面將講解的代碼中進(jìn)行插件配置才能使其生效惹谐。
- noParse：此配置中noParse沒有進(jìn)行配置持偏，但是這是一個(gè)很有用的選項(xiàng)，如果你確定一個(gè)模塊中沒有其它新的依賴 就可以配置這項(xiàng)豺鼻，webpack 將不再掃描這個(gè)文件中的依賴综液，從而減少了打包時(shí)間，大大提高效率儒飒。如果不在乎構(gòu)建時(shí)間可以不配置這個(gè)谬莹，畢竟人腦都容易出錯(cuò)，隨時(shí)都會(huì)記錯(cuò)很多東西桩了。
另外
比如用到了vue附帽，要想把vue里的sass文件單獨(dú)提取出來在這里就需要進(jìn)行單獨(dú)配置：
vue: {
loaders: {
sass: ExtractTextPlugin.extract('vue-style-loader', 'css-loader', 'sass-loader')
}
}
插件
插件可以完成更多 loader 不能完成的功能
這就到了上面提到的ExtractTextPlugin，需要在這里配置：
plugins: [
// 配置以文件形式打包c(diǎn)ss
new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[contenthash]-[name]", {
disable: false,
allChunks: true
})
]
同時(shí)不能忘記了引入：
var ExtractTextPlugin = require("extract-text-webpack-plugin");
使用Webpack加載的第三方庫或插件中井誉，基本上都需要依賴另外一些庫蕉扮，例如jQuery，所以這里提一下在webpack項(xiàng)目中使用jquery的配置颗圣，我們?cè)谇懊娴膭e名配置中已經(jīng)定義好了jquery文件位置喳钟，進(jìn)行如下配置：
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery",
})
]
此配置提供了一個(gè)自定義的插件屁使，可以使jquery變成全局變量，你不用在自己的開發(fā)文件中import "jquery";了奔则，免去了很多麻煩蛮寂。
以上總結(jié)的這些差不多是webpack最基本的配置了，實(shí)際開發(fā)和生產(chǎn)環(huán)境中會(huì)有更多的Loaders和插件引入易茬，比如熱加載插件酬蹋、html-webpack-plugin、CommonsChunkPlugin等等抽莱，總之在配置和修改配置的時(shí)候要盡量細(xì)心范抓，畢竟配置繁多，很輕易就出錯(cuò)了食铐。
