1. 基礎配置文件 webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 將css文件剝離出 js 文件
const htmlWebpackPlugin = require("html-webpack-plugin"); // 將html文件拷貝到dist
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 打包時自動刪除之前打包的文件
const argv = require('yargs-parser')(process.argv.slice(2));? // 獲取運行指令中的環(huán)境配置
const _mode = argv.mode || 'dev';? // 獲取當前環(huán)境
const _modeConfig = (_mode === 'production' ? true : false)
const _mergeConfig = require(`./webpack.${_mode}.js`); // 獲取對應環(huán)境的配置
const { merge } = require('webpack-merge');
const { join } = require('path');
const webpackConfig = {
? ? plugins:[
? ? ? ? new htmlWebpackPlugin({
? ? ? ? ? ? filename:_modeConfig ? 'index.html' : 'index.html',? ? ? // html文件的輸入地址及名稱（可指定文件夾 如: /html/index.html; 生成路徑為: /dist/html/index.html）
? ? ? ? ? ? template:join(__dirname,'./src/index.html')? ? ? ? // 配置要打包的 html 文件
? ? ? ? }),
? ? ? ? new MiniCssExtractPlugin({
? ? ? ? ? ? filename: _modeConfig ? 'prod/[name].[hash:5].css' : '[name].css',
? ? ? ? ? ? chunkFilename:_modeConfig ? 'prod/[id].[hash:5].css' : '[id].css'
? ? ? ? }),
? ? ? ? new CleanWebpackPlugin(),
? ? ],
? ? module:{
? ? ? ? rules:[
? ? ? ? ? ? {
? ? ? ? ? ? ? ? test:/\.css$/,
? ? ? ? ? ? ? ? use:[
? ? ? ? ? ? ? ? ? ? MiniCssExtractPlugin.loader,
? ? ? ? ? ? ? ? ? ? // {loader:'style-loader'},
? ? ? ? ? ? ? ? ? ? {loader:'css-loader'}
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? }
? ? ? ? ]
? ? }
};
module.exports = merge(_mergeConfig,webpackConfig);
2. 開發(fā)環(huán)境配置文件: webpack.development.js
module.exports = {
? ? output:{
? ? ? ? filename:'[name].bundle.js'
? ? }
}
3. 生產(chǎn)環(huán)境配置文件: webpack.production.js
module.exports = {
? ? output:{
? ? ? ? filename:'prod/[name].[hash:5].bundle.js',
? ? ? ? publicPath:'./'
? ? }
}
入口文件: src/index.js
????import './index.css'? ? // 使用css樣式
????console.log("webpack");
css文件: src/index.css
.test{
? ? color: #ff0000;
}
html文件: src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
? ? <h1 class="test">
? ? ? ? 測試
? ? </h1>
</body>
</html>
