配置常用webpack

loader

file-loader
url-loader ：把圖片轉成base64

@babel/preset-env
@babel/core
babel-loader ：es6轉es5

node-sass
sass-loader
style-loader
css-loader ： sass轉css

plugin

MiniCssExtractPlugin ：把css文件分離出來

DefinePlugin ： 定義全局變量，可用於分離生產環境和開發環境
定義之後的變量可以在js中直接使用

HtmlWebpackPlugin ：自動生成html

webpack-dev-server ： 熱更新

CopyWebpackPlugin ：將單個文件或整個目錄複製到構建目錄。

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

let glob = require('glob');


function getEntry() {
    var entry = {};
    glob.sync(__dirname + "/src/js/*.js").forEach(function (file) {
        var name = file.match(/([^/]+?)\.js/)[1];
        entry[name] = __dirname + "/src/js/" + name + ".js";
    });
    return entry;
}

module.exports = {
    entry: getEntry(),
    output: {
        path: __dirname + '/dist',
        filename: './js/[name].js',
        sourceMapFilename: '[file].map'
    },
    // 服務器
    devServer:{
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 3000,
    },
    mode: 'development',
    // mode: 'production',
    module: {
        rules: [
            // 圖片轉成base64
            {
                test:/\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 圖片大於8K則輸出圖片
                            limit: 8192,
                            fallback:'file-loader',
                            name:'images/[name].[ext]',
                            publicPath:'../'
                        }
                    }
                ]
                
            },
            // es6轉es5 解析jsx
            {
                test:'/\.(js|jsx)$/',
                exclude:/(node_modules|bower_components)/,
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:['@babel-preset-env'],
                            plugins:['@babel/plugin-transform-react-jsx']
                        }
                    }
                ]
            },
            // sass轉css
            {
                test:/\.scss$/,
                use:[
                    {
                        loader:MiniCssExtractPlugin.loader
                    },
                    {
                        loader:'css-loader'
                    },
                    {
                        loader:'sass-loader'
                    }
                ]
            }
        ]
    },
    plugins:[
        // 分離css文件
        new MiniCssExtractPlugin({
            filename:"./css/[name].css",
            chunkFilename:"[id].css"
        }),
        // 可定義全局變量
        new webpack.DefinePlugin({
            'SERVICE_URL':JSON.stringify('http://baidu.com')
        }),
        // 拷貝插件
        new CopyWebpackPlugin([
            {from: path.join(__dirname, '/src/wrap'),to: path.join(__dirname, 'dist/wrap')},
            {from: path.join(__dirname, '/src/images'),to: path.join(__dirname, 'dist/images')}
        ])
        // 自動生成html
        // new HtmlWebpackPlugin({
        //     title:'老狗',
        //     filename:'index.html',
        //     template:'index.html',
        // })
    ],
    // 啓用文件監聽  自動運行
    watch:true,
    // 監聽的配置
    watchOptions:{
        //默認爲空，不監聽的文件或者文件夾，支持正則匹配
		ignored: /node_modules/,
		//監聽到變化發生後會等300ms再去執行，默認300ms
		aggregateTimeout: 300,
		//判斷文件是否發生變化是通過不停詢問系統指定文件有沒有變化實現的，默認每秒問1000次
		poll: 1000
    },
    
}