關(guān)于webpack
關(guān)于webpack砸捏，首先參考的是webpack官方中文文檔谬运；
介紹了四大屬性組成部分：
1.entry -- 入口；
2.output -- 出口垦藏；
3.loader梆暖；-- 處理非js文件；
4.p'lugins -- 插件掂骏；
webpack在處理應(yīng)用程序時(shí)轰驳，會(huì)遞歸的構(gòu)建一個(gè)依賴關(guān)系圖。
1.入口：規(guī)定依賴關(guān)系圖的開始弟灼；
一個(gè)入口文件： 只有一個(gè)起點(diǎn)的單頁面應(yīng)用
module.exports =entry: {
main: './path/to/my/entry/file.js'级解；
vendors: './src/vendors.js' //第三方庫入口
}
簡寫模式：
module.exports = {entry: './path/to/my/entry/file.js'}
多個(gè)入口文件： 使用數(shù)組；多頁面應(yīng)用田绑；
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
進(jìn)入入口起點(diǎn)后勤哗，webpack就能找到哪些模塊或庫是入口起點(diǎn)的依賴；每個(gè)依賴項(xiàng)是隨即被處理的掩驱。
2.出口：規(guī)定所創(chuàng)建的bundles在哪里輸出俺陋，以及如何命名這些文件；
選項(xiàng)可以控制webpack如何將編譯文件寫入硬盤昙篙；【即便有多個(gè)入口文件腊状，只設(shè)置一個(gè)出口配置】
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
} //將一個(gè)單獨(dú)的my-first-webpack.bundle.js文件輸出到硬盤 './dist/my-first-webpack.bundle.js'路徑下；
//或
output: {
filename: '[name].[chunkhash:5].js', // 輸出文件名
path: path.resolve(__dirname, 'dist')
}, //將多個(gè)文件輸出到./dist/ 下苔可；
3.loader：處理非js類型文件缴挖，webpack只能理解js。loader可以轉(zhuǎn)換其他類型的文件為webpack可以理解的文件類型焚辅；
loader可以import 引入任何類型的文件映屋；
module: {
rules: [
{ test: /.txt/,loader: 'vue-loader' },
]
}
};
在webpack中配置后，要用命令安裝好相應(yīng)的loader瘫析；
npm install --save-dev css-loader
npm install --save-dev ts-loader
在應(yīng)用程序中有三處使用loader方式砌梆；
推薦使用在webpack.config.js中配置，如上贬循；
4.plugins：插件 用來處理范圍更廣的任務(wù)咸包。用來處理loader無法首先的其他事；包括代碼優(yōu)化杖虾，打包烂瘫，轉(zhuǎn)換開發(fā)環(huán)境等；
直接查閱插件列表奇适；
插件有apply屬性坟比，被compiler調(diào)用。compiler在整個(gè)生命周期都可以訪問嚷往；
由于plugins中攜帶參數(shù)/選項(xiàng)温算。需要向webpack屬性中傳入new實(shí)例；
推薦使用配置方法间影；如下；
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, compilation => {
console.log("webpack 構(gòu)建過程開始茄茁！");
});
}
} //compiler.hooks中的tap方法的第一個(gè)參數(shù)應(yīng)該是駝峰式的插件名魂贬；建議使用常量，以便被所有hook使用裙顽；
5.模式：mode屬性 規(guī)定：開發(fā)環(huán)境付燥；告知相應(yīng)模式的內(nèi)置優(yōu)化；
mode:'development/production' //設(shè)置開發(fā)或者生產(chǎn)模式愈犹，
設(shè)置后會(huì)將process.env.NODE_ENV的值設(shè)置為對應(yīng)的 development/production键科；分別啟用不同的插件；
module.exports = {
- mode: 'development'
- plugins: [
- new webpack.NamedModulesPlugin(),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}
module.exports = {
- mode: 'production',
- plugins: [
- new UglifyJsPlugin(/* ... */),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
- new webpack.optimize.ModuleConcatenationPlugin(),
- new webpack.NoEmitOnErrorsPlugin()
- ]
}
模塊解析
用于找到模塊的絕對路徑漩怎。一個(gè)模塊（可以是應(yīng)用程序代碼或是第三方庫）可以作為另一個(gè)模塊的依賴勋颖，最后被后者引用；
import foo from 'path/to/module'
// 或者
require('path/to/module')
