const { resolve } = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const commonCssLoader = [
? ? MiniCssExtractPlugin.loader,?
? ? 'css-loader', {
? ? ? ? // 還需在package.json中定義browserlist
? ? ? ? loader: 'postcss-loader',
? ? ? ? options: {
? ? ? ? ? ? ident: 'postcss',
? ? ? ? ? ? plugins: () => [require('postcss-preset-env')]
? ? ? ? }
? ? }
]
module.exports = {
? ? // html文件：默認(rèn)不能使用HMR功能.同時(shí)導(dǎo)致問(wèn)題：html文件不能熱更新?。?！
? ? // 解決：entry入口修改，將html引入后它的HMR生效（默認(rèn)不添加 HMR）
? ? entry: ['./src/js/index.js', './src/index.html'],
? ? output: {
? ? ? ? filename: 'js/built.js',
? ? ? ? path: resolve(__dirname, 'build')
? ? },
? ? module: {
? ? ? ? rules: [
? ? ? ? ? ? // loader配置 less/css資源
? ? ? ? ? ? {
? ? ? ? ? ? ? ? test: /\.css$/,
? ? ? ? ? ? ? ? use: [...commonCssLoader]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? test: /\.less$/,
? ? ? ? ? ? ? ? use: [...commonCssLoader, 'less-loader']
? ? ? ? ? ? },
? ? ? ? ? ? // 處理js資源 在package.json中eslintConfig --》airbnb
? ? ? ? ? ? // 正常一個(gè)文件只能被一個(gè)loader處理:
? ? ? ? ? ? // 當(dāng)一個(gè)文件被多個(gè)laoder處理要設(shè)置先后順序enforce參數(shù)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? test: /\.js$/,
? ? ? ? ? ? ? ? exclude: /node_modules/, // 不包含文件
? ? ? ? ? ? ? ? loader: 'eslint-loader',
? ? ? ? ? ? ? ? enforce: 'pre', // 優(yōu)先執(zhí)行eslint-loader處理文件
? ? ? ? ? ? ? ? options: {
? ? ? ? ? ? ? ? ? ? fix: true,
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? test: /\.js$/,
? ? ? ? ? ? ? ? exclude: /node_modules/, // 不包含文件
? ? ? ? ? ? ? ? loader: 'babel-loader',
? ? ? ? ? ? ? ? options: {
? ? ? ? ? ? ? ? ? ? presets: [
? ? ? ? ? ? ? ? ? ? ? ? ['@babel/preset-env',
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? useBuiltIns: 'usage',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? corejs: { version: 3 },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? targets: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? chrome: '60',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? firefox: '50'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? }]
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? // 處理圖片資源
? ? ? ? ? ? {
? ? ? ? ? ? ? ? test: /\.(jpg|png|gif)/,
? ? ? ? ? ? ? ? loader: 'url-loader',
? ? ? ? ? ? ? ? options: {
? ? ? ? ? ? ? ? ? ? limit: 8 * 1024,
? ? ? ? ? ? ? ? ? ? name: '[hash:10].[ext]',
? ? ? ? ? ? ? ? ? ? outputPath: 'imgs',
? ? ? ? ? ? ? ? ? ? esModule: false
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? // 處理html中的圖片(所以處理html文件中圖片)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? test: /\.html$/,
? ? ? ? ? ? ? ? loader: 'html-loader' // 專(zhuān)門(mén)處理html中圖片(依賴(lài)的commonjs 處理圖片的url-loader需設(shè)置esModule:false)
? ? ? ? ? ? },
? ? ? ? ? ? // 打包排除的其他文件（音視頻之類(lèi)的）
? ? ? ? ? ? {
? ? ? ? ? ? ? ? exclude: /\.(js|css|less|html|jpg|png|gif)/,
? ? ? ? ? ? ? ? laoder: 'file-loader',
? ? ? ? ? ? ? ? options: {
? ? ? ? ? ? ? ? ? ? outputPath: 'media'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ]
? ? },
? ? plugins: [
? ? ? ? new MiniCssExtractPlugin({
? ? ? ? ? ? filename: 'css/built.css'
? ? ? ? }),
? ? ? ? new OptimizeCssAssetsWebpackPlugin(),
? ? ? ? // 處理html資源（ 無(wú)法處理html中的圖片處理）
? ? ? ? new HtmlWebpackPlugin({
? ? ? ? ? ? template: './src/index.html',
? ? ? ? ? ? //壓縮（去空格、注釋等）
? ? ? ? ? ? minify: {
? ? ? ? ? ? ? ? collapseWhitespace: true,
? ? ? ? ? ? ? ? removeComments: true
? ? ? ? ? ? }
? ? ? ? })
? ? ],
? ? mode: process.env.NODE_ENV // production環(huán)境下js自動(dòng)壓縮的
}
/** devtool：source-map 一種提供源代碼到構(gòu)建后的代碼映射技術(shù)（如果構(gòu)建后報(bào)錯(cuò)，通過(guò)映射可以追蹤源代碼）
* [inline-|hidden-|eval-][nosources-][cheap-[module-]]]source-map
*
* // 提示錯(cuò)誤代碼準(zhǔn)確信息 和 源代碼錯(cuò)誤位置
* source-map
* inline-source-map 內(nèi)聯(lián) 構(gòu)建速度快 不生成文件
*
* // 錯(cuò)誤代碼錯(cuò)誤原因 無(wú)法追蹤源代碼文件
* hidden-source-map 外部 生成文件xxx.map
*
* // 錯(cuò)誤代碼錯(cuò)誤原因 無(wú)法追蹤源代碼文件
* eval-source-map 內(nèi)聯(lián)? 每個(gè)文件都生產(chǎn)對(duì)應(yīng)的sourceMap文件
*
* // 錯(cuò)誤代碼錯(cuò)誤原因 無(wú)源代碼錯(cuò)誤提示
* nosources-source-map 外部
*
* cheap-source-map 外部
*
* cheap-module-source-map 外部
*
* 內(nèi)聯(lián)：不生成sourceMap文件 構(gòu)建速度快
* 內(nèi)聯(lián)：生成sourceMap文件
*/
