本基礎配置基于 webpack@3. 版本*
入口與輸出
entry
- 單個入口打包
entry設置為一個入口随常，打包出來的文件只有一個js言询。
__dirname為項目根路徑（nodejs）。
module.exports = {
// 入口文件路徑
entry: __dirname + '/index.js',
}
- 多個入口打包
entry設置為一個對象战得，包含多個屬性（入口）站辉，打包后為多個文件培漏。
module.exports = {
// 入口文件路徑
entry: {
app: __dirname + '/index.js',
vendor: ['angular', '@uirouter/angularjs']
}
}
- 提取第三方模塊
第三方模塊由于在資源更新時無需更新怀估，所以打包成單獨的一個文件進行緩存碱工。
module.exports = {
...
// 插件
plugins: [
...
// 防止第三方模塊的文件 hash 值發(fā)生變化
new webpack.HashedModuleIdsPlugin(),
// 提取第三方模塊
new webpack.optimize.CommonsChunkPlugin({
// 對應的entry數(shù)組vendor
name: 'vendor',
filename: 'js/vendor-[chunkhash:6].js'
})
]
}
- 提取公共模塊
將重復的模塊提取出來單獨作為一個文件（發(fā)生在提取第三方模塊之后）。
module.exports = {
...
// 插件
plugins: [
// 提取第三方模塊
...
// 提取公共模塊
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/common-[chunkhash:6].js'
})
]
}
output
-
[name]：文件名變量 -
[hash]：如果所有文件中奏夫，有一個文件發(fā)生變化則重新生成hash值，一般用于版本更新历筝，[hash]作為目錄 -
[chunkhash]：只有當前文件變化則重新生成chunkhash值酗昼，一般用于js文件 -
[contenthash]：用于css的hash值（css是以js的方式生成，需和js的chunkhash分開梳猪，不然css的變化會引起js的hash值變化）麻削，在extract-text-webpack-plugin插件中使用：new ExtractTextWebpackPlugin('css/base-[contenthash:6].css') -
publicPath：輸出目錄對應的公開URL，會影響后面導入的css以及css中引入的字體文件路徑
module.exports = {
// 打包輸出路徑
output: {
path: __dirname + '/dist',
filename: 'js/[name]-[chunkhash:6].js',
publicPath: '/'
}
}
常用loader
清理打包目錄
// 安裝所需包
$ cnpm install --save-dev clean-webpack-plugin
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
plugins: [
new ClearWebpackPlugin(['dist'])
]
}
生成入口模板
// 安裝所需包
$ cnpm install --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new ClearWebpackPlugin({
filename: 'index.html',
// 默認模板
template: './index.html'
})
]
}
es6轉(zhuǎn)義es5
// 安裝所需包
$ cnpm install babel-loader babel-core babel-preset-es2015
// 配置js轉(zhuǎn)義規(guī)則
module.exports = {
module: {
rules: [
{
test:/\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
],
// 排除的文件夾
exclude: /node_modules/
}
]
}
}
css合并
- 合并為單個文件
loader加載順序： less-loader > css-loader > style-loader春弥，這里使用css-loader的壓縮功能呛哟。
// 安裝所需包
$ cnpm install --save-dev extract-text-webpack-plugin css-loader style-loader less-loader less
// 配置css/less轉(zhuǎn)義規(guī)則
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.(css|less)$/,
// 合并
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader', options: {
// 啟用壓縮
minimize: true
}
},
{loader: 'less-loader'}
]
})
}
]
},
plugins: [
new ExtractTextWebpackPlugin('css/style-[contenthash:6].css')
]
}
- 合并為多個文件
使用多個
ExtractTextWebpackPlugin實例生成，用exclude,include參數(shù)隔離第三方庫匿沛。
// 安裝所需包
$ cnpm install --save-dev extract-text-webpack-plugin css-loader style-loader less-loader less
// 配置css/less轉(zhuǎn)義規(guī)則
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
// 生成多個實例扫责，base存放第三方庫，app為自定義
let baseCss = new ExtractTextWebpackPlugin('css/base-[contenthash:6].css');
let appCss = new ExtractTextWebpackPlugin('css/app-[contenthash:6].css');
module.exports = {
module: {
rules: [
{
test: /\.(css|less)$/,
// 合并
use: appCss.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader', options: {
// 啟用壓縮
minimize: true
}
},
{loader: 'less-loader'}
]
}),
// 隔離第三方庫
exclude: /node_modules/
},
{
test: /\.css$/,
// 合并
use: baseCss.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader', options: {
// 啟用壓縮
minimize: true
}
}
]
}),
// 隔離第三方庫
include: /node_modules/
}
]
},
plugins: [
baseCss, appCss
]
}
css引入的文件
字體文件逃呼，圖片
// 安裝所需包
$ cnpm install file-loader
module.exports = {
module: {
rules: [
{
// 加載css中的字體文件
test: /(\.ttf|\.woff2|\.woff|\.eot|\.svg|\.dtd)/,
use: [
{
loader: "file-loader"
}
]
}
]
}
}
html模板轉(zhuǎn)換字符串
// 安裝所需包
$ cnpm install raw-loader
module.exports = {
module: {
rules: [
{
// 將html文件轉(zhuǎn)換為字符串
test: /\.html$/,
use: [{
loader: "raw-loader"
}]
}
]
}
}
devServer
npm --save-dev webpack-dev-server
module.exports = {
devServer: {
// 服務器文件路徑
contentBase: './dist',
// 不跳轉(zhuǎn)url
historyApiFallback: true,
// inline模式url不用變化
inline: ture,
// 熱更新
hot: true,
// 開啟GZIP
compress: true,
}
}
