webpack配置react--ts項目

webpack.base.js

const path = require('path')
// 因為eslint默認審查的es5，需要明確讓他審查es6.，所以需要配置parserOptions

const HtmlWebpackPlugin = require('html-webpack-plugin')
// 注意是引入 'html-webpack-plugin' 沒有 s 否則報錯
// const HtmlWebpackPlugin = require('html-webpack-plugins')
// TypeError: Cannot read property 'tapAsync' of undefined

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// const CleanWebpackPlugin = require('clean-webpack-plugin') 錯誤的引入方法，報錯如下
// TypeError: CleanWebpackPlugin is not a constructor

const webpack = require('webpack')
console.log('webpack : ', webpack)

console.log('路徑 ： ', path.resolve(__dirname, '../src/index.js'))
module.exports = {
    entry: path.resolve(__dirname, '../src/index.js'),
    module: {
        rules: [
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: '8*1024',
                            name: '[name].[ext]',
                            outputPath: 'images'
                        }
                    }
                ]
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            // npm install -D babel-loader @babel/core @babel/preset-env
            // npm install -D babel-loader @babel/core @babel/cli @babel/preset-env
            {
                test: /\.(js|jsx)$/,
                exclude: [/node_modules/, /build/],
                // 這里表示排除node_modules中的js文件
                use: [
                    {
                        loader: 'babel-loader',
                        // 如果不配置該項則不會把es6語法轉化成es5語法，相當於新建 .babelrc 文件中配置
                        /*
                            "presets":[
                                "@babel/preset-env"
                            ]
                        */
                        // 注意：如果在 .babelrc 有如上配置，則此處可以不寫配置，效果是一樣的
                        options: {
                            presets: [
                                '@babel/react',
                                '@babel/env'
                                // "es2015"
                            ]
                        }
                    },
                    {
                        loader: 'eslint-loader',
                        options: {
                            emitWarning: true,
                            // 自動修復 eslint 語法錯誤
                            fix: true
                        }
                    }
                ]
            }
        ]
    },
    // babel-preset-es2015
    optimization: {
        // 將每個js文件打包形成一個單獨的js文件，而非一個整體文件
        splitChunks: {
            // minSize: 2000, // 3kb   表示在壓縮前的最小模塊大小,默認值是30kb
            chunks: 'all' // 同時分割同步和異步代碼,推薦。
        }
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../src/index.html'),
            filename: 'index.html'
        })
    ]
}

 

webpack.dev.js

const merge = require('webpack-merge')
const common = require('./webpack.base.js')
const path = require('path')

module.exports = merge(common, {
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    devtool: 'source-map',
    module: {
        rules: [

            {
                test: /\.(c|le)ss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                            // localIdentName: '[name].[hash:5]'
                        }
                    },
                    'less-loader'
                ]
            },
            {

            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 8090,
        hot: true,
        open: true,
        proxy: {
            '/m-api': {
                target: 'http://47.98.159.95',
                changeOrigin: true,
                ws: true
            }
        }
    }

})

 

webpack.pro.js

const common = require('./webpack.base.js')
const merge = require('webpack-merge')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// css 壓縮插件
const OptimizeCSSAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 壓縮js插件，但是該插件不支持es6語法
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
// 也可以壓縮js，而且支持es6語法
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = merge(common, {
    mode: 'production',
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: 'js/[name].js'
    },
    module: {
        rules: [
            {
                test: /\.(css|less)$/,
                use: [
                    // css 把css文件抽取到單獨的目錄
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    'less-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].[hash:8].css',
            chunkFilename: '[name].[hash:5].css'
            // chunkFilename: '[name].chunk.css',
            // chunkFilename: "[id].css",
        })
    ],
    // 優化
    optimization: {
        minimize: true, // 默認值為 true ， 執行默認壓縮

        // 使用第三方的壓縮插件，也可以在optimization.minimizer的數組列表中進行配置
        minimizer: [
            // css 壓縮
            // new OptimizeCSSAssetsWebpackPlugin(),
            // js 壓縮, 此插件不支持es6的語法，所以需要使用 terser-webpack-plugin 替換掉 uglifyjs-webpack-plugin
            // new UglifyjsWebpackPlugin({
            //     cache: true,
            //     parallel: true, // 單詞翻譯 平行線 對比
            //     sourceMap: true
            // }),
            // 使用 TerserWebpackPlugin 替換掉 UglifyjsWebpackPlugin 插件
            new TerserWebpackPlugin({
                cache: true,
                parallel: true,
                sourceMap: true
            })
        ]
        // chunk 塊，配置后會多生成一個 js 文件
        // runtimeChunk: {
        //     name: 'manifest'
        // },
    }
})