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'
        // },
    }
})