文件目錄
文件目錄
webpack.config.js文件
const { resolve } = require('path');
// 打包html資源的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//把css從js中提取出來成單獨文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 壓縮css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
process.env.NODE_ENV = 'production'; //定義node.js 環(huán)境變量 使用開發(fā)環(huán)境的css兼容性配置 決定package.json中browserlist的環(huán)境
// 復用loader 減少重復代碼
const commonCssLoader = [
MiniCssExtractPlugin.loader,
"css-loader",
{
//修改配置，寫成對象的方式 css兼容性處理
loader: 'postcss-loader', //css兼容性處理
//options:修改默認配置
options: {
// 還需要在package.json中指示兼容性處理做到那些方面 browserslist
ident: 'postcss', //默認兼容性處理配置
// 指示postcss以什么插件工作
plugins: () => [
require('postcss-preset-env')()
]
}
}
];
module.exports = {
//打包的入口文件
entry: './src/js/index.js',
// 輸出文件
output: {
// 輸出文件名
filename: "js/built.js",
// 輸出文件路徑
// __dirname node.js的變量，代表當前文件目錄的絕對路徑
path: resolve(__dirname, 'build'),
},
// loader的配置
module: {
rules: [
// 不同文件必需配置不同loader處理
{
// 匹配css文件
test: /\.css$/,
// 使用的loader，use數(shù)組中l(wèi)oader的執(zhí)行順序，從右到左，從上到下
/* use: [MiniCssExtractPlugin.loader, 'css-loader', {
//修改配置，寫成對象的方式 css兼容性處理
loader: 'postcss-loader', //css兼容性處理
//options:修改默認配置
options: {
// 還需要在package.json中指示兼容性處理做到那些方面
ident: 'postcss', //默認兼容性處理配置
// 指示postcss以什么插件工作
plugins: () => [
require('postcss-preset-env')()
]
}
}], */
use: [...commonCssLoader],
},
{
test: /\.less$/,
/* use: [MiniCssExtractPlugin.loader, 'css-loader',
{
//修改配置，寫成對象的方式 css兼容性處理
loader: 'postcss-loader', //css兼容性處理
//options:修改默認配置
options: {
// 還需要在package.json中指示兼容性處理做到那些方面
ident: 'postcss', //默認兼容性處理配置
// 指示postcss以什么插件工作
plugins: () => [
require('postcss-preset-env')()
]
}
},
'less-loader'
] */
use: [...commonCssLoader, 'less-loader'],
},
/* 正常來講，一個文件只能被一個loader處理。
如果一個文件被多個loader處理，必須要清楚loader的執(zhí)行順序 先eslint-loader?babel-loader
先eslint-loader?babel-loader :原因eslint-loader是做語法檢查的，一旦語法有錯誤還做兼容性處理是沒有用的 */
{
// 處理js資源
// 在package.json中要添加eslintConfig配置來指示eslint做哪些檢查 airbnb規(guī)則
test: /\.js$/,
exclude: /node_modules/, //不檢查第三方庫
enforce: 'pre', //優(yōu)先執(zhí)行
loader: 'eslint-loader', //js語法檢查
options: {
fix: true, //自動修復錯誤
}
},
{
//處理js資源 做兼容性處理
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 預設 告訴babel使用什么方式做兼容性處理
// 問題：@babel/preset-env只能做簡單的語法兼容性處理，如箭頭函數(shù)、let、const等。對于復雜的Promise、keys等不能實現(xiàn)兼容性處理。
// 解決：使用polyfill庫 但是polyfill文件太大，會把所有兼容性引入 不能實現(xiàn)部分引入
presets: [
['@babel/preset-env',
{
//實現(xiàn)按需加載兼容性處理
useBuiltIns: 'usage',
corejs: { version: 3 }, //按需加載的版本
// 兼容版本瀏覽器
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
}
},
{
//處理圖片文件
//問題：默認處理不了html中的img標簽中的圖片
test: /\.(jpg|png|svg|gif)$/,
// 使用loader處理
// 下載 url-loader file-loader
loader: 'url-loader',
options: {
// 圖片大小小于8kb，就會被base64處理
// 優(yōu)點：減少請求數(shù)量（減輕服務器壓力）
// 缺點：圖片體積會更大（文件請求速度會更慢）
limit: 8 * 1024,
// 問題：因為url-loader默認使用es6模塊化解析，而html-loader引入圖片使用commonjs
// 解析時會出問題[object Module]
// 解決：關閉url-loader的es6模塊化，使用commonjs解析
esModule: false,
outputPath: 'images', //輸出的路徑
// publicPath: '../images', //指定目標文件的自定義公共路徑，這樣打包后css中的圖片才能正常顯示，但是img標簽的圖片不能正常顯示，最好的解決辦法是讓打包后的css文件和html文件處于同一級
name: '[name][hash:10].[ext]', //讓名字更短
}
},
{
// 匹配HTML文件
test: /\.html$/,
// 處理HTML文件中的img圖片（負責引入img，從而能被url-loader進行處理）
loader: 'html-loader'
},
{
// 排除 css/js/html資源 打包其他資源
exclude: /\.(html|css|js|less|jpg|png|png|svg|gif)$/,
loader: 'file-loader',
options: {
name: '[name][hash:10].[ext]',
outputPath: 'media',
}
},
]
},
plugins: [
//plugins的配置
// html-webpack-pligin
// 功能：默認會創(chuàng)建一個空的HTML，自動引入打包輸出的所有資源（js/css)
// 需求：需要有結構的html文件
new HtmlWebpackPlugin({
template: './src/index.html', //指定該文件為模板創(chuàng)建新的HTML文件
// 壓縮html文件
minify: {
// 移除空格和注釋
collapseWhitespace: true,
removeComments: true,
}
}),
// 提取css成單獨文件
new MiniCssExtractPlugin({
filename: '[name].css', //提取出來的文件名字
}),
// 壓縮css
new OptimizeCssAssetsWebpackPlugin(),
],
mode: 'production', //js資源會自動壓縮
}
關于單獨提取css文件后，css文件的圖片不顯示的問題。主要是圖片路徑不對導致。
解決1：設置publicPath:'../images'。但是這樣導致的問題是img標簽中的圖片不能正常顯示。
解決2：將打包后的css文件和HTML至于同一級目錄下。
圖片不顯示解決方案
