關(guān)鍵點
- webpack配置詳解
- entry
- output
一. entry(入口配置)
項目很多文件之間的關(guān)系是需要我們牽線搭橋, 然后讓webpack去處理; 一般項目會存在一個或者多個'主文件', 其他文件(模塊)直接或者間接關(guān)聯(lián)到主文件. 那么entry就是配置配置主文件信息.
entry賦值語法:
- 字符串 | 數(shù)組
const config = {
entry: '/path/to/my/entry/file.js'
};
module.exports = config;
簡寫方式:
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
- 對象
常見場景: 配置多頁應(yīng)用, 或者抽出公共模塊代碼, 需要對象語法形式.
entry:{
main:'./src/index.js',
second:'./src/index2.js',
vendor: ['react', 'react-dom']
}
二.輸出配置(output)
output 配置項作用于打包文件的輸出階段.
- 基本配置, filename和path
- filename用于輸出文件的名
- path設(shè)置輸出路徑
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
- chunkfile
在程序剛進(jìn)入時,可能不需要某個主文件的所有代碼,這時我們使用一定方法對主文件代碼進(jìn)行分割,如此,可以按需加載;這種不具備獨立依賴的文件稱為chunkfile
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: 'js/[name].chunk.js'
}
注釋: [name]為webpack中占位符,表示打包后文件的名稱,可以在entry or 代碼中設(shè)置(webpack還有其他占位符)
三.modules
開發(fā)者在模塊化編程中,將程序分解成離散功能塊,稱為模塊.
對于webpack而言,所有的文件都是模塊.
-
webpack 模塊
對比 Node.js 模塊，webpack 模塊能夠以各種方式表達(dá)它們的依賴關(guān)系拨与，幾個例子如下：- ES2015 import 語句
- CommonJS require() 語句
- AMD define 和 require 語句
- css/sass/less 文件中的 @import 語句淤毛。
- 樣式(url(...))或 HTML 文件(
<img src=...>)中的圖片鏈接(image url)
loader
webpack只能處理 js 文件, 對于一些js新語法,或者其他類型的模塊,應(yīng)該如何處理,這時需要webpack又一重要部分loader.
webpack 中低淡，loader 的配置主要在module.rules 中進(jìn)行
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
}
- plugins 的配置
一切l(wèi)oader 不能做的處理都可由plugins 來做
[待續(xù)持續(xù)更新吧]
