-
webpack 是什么
webpack不僅是一個js應(yīng)用的打包工具（能支持ES Modules和Common JS），也能支持不同的資源（比如圖片华临，字體和樣式表）础淤，關(guān)注加載次數(shù)和性能
入口 Entry points
- 單個入口
// 簡寫版
const config = {
entry: './path/to/my/entry/file.js'
}
module.exports = config;
等同于
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
若給entry屬性资铡，傳一個文件路徑數(shù)組怕犁，則創(chuàng)建多個主入口（multi-main entry）
- 對象語法（定義入口的方法中最可擴展的）
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
- 常見場景
- 分離應(yīng)用程序（
app）和第三方庫（vendor）入口
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
- 多頁面應(yīng)用
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
輸出Output
- 用法
module.exports = {
output: {
filename: 'bundle.js',
}
};
- 多入口
filename需要使用變量边篮，保證每個文件有獨立的文件名
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
};
// writes to disk: ./dist/app.js, ./dist/search.js
mode
值有development, production(默認), none，可以啟用不同模式下的webpack內(nèi)置優(yōu)化
module.exports = {
mode: 'production'
};
development：將process.env.NODE_ENV設(shè)為development奏甫，啟用 NamedChunksPlugin 和 NamedModulesPlugin戈轿。；
production： 將process.env.NODE_ENV設(shè)為production阵子，啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.思杯；
- 根據(jù)mode的值設(shè)置config,要export function而非對象
var config = {
entry: './app.js'
//...
};
module.exports = (env, argv) => {
if (argv.mode === 'development') {
config.devtool = 'source-map';
}
if (argv.mode === 'production') {
//...
}
return config;
};
Loaders
使用loader的三種方法：
- 配置（推薦）：在 webpack.config.js 文件中指定 loader。
-
內(nèi)聯(lián)：在每個
import語句中顯式指定 loader挠进。 - CLI：在 shell 命令中指定它們色乾。
具體如下：
- 配置webpack.config.js : loader執(zhí)行的順序為從右向左執(zhí)行，先
sass-loader领突，再css-loader暖璧，最后style-loader
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
},
{ loader: 'sass-loader' }
]
}
]
}
};
插件
插件是一個具有 apply 屬性的 JavaScript 對象
需要使用插件時，先require()再添加到plugins數(shù)組
插件可以通過options選項自定義攘须，可以在一個配置文件中多次使用同一個插件漆撞，使用new操作符創(chuàng)建實例
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
