webpack.config.js開發環境示例

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    mode: 'development',
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, './dist')
    },
    devtool: 'inline-source-map',
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src/')
        }
    },
    devServer: {
        clientLogLevel: 'warning', // 可能的值有 none, error, warning 或者 info（默認值)
        hot: false, // 啓用 webpack 的模塊熱替換特性, 這個需要配合： webpack.HotModuleReplacementPlugin插件
        contentBase: path.join(__dirname, "dist"), // 告訴服務器從哪裏提供內容， 默認情況下，將使用當前工作目錄作爲提供內容的目錄
        compress: true, // 一切服務都啓用gzip 壓縮
        host: '0.0.0.0', // 指定使用一個 host。默認是 localhost。如果你希望服務器外部可訪問 0.0.0.0
        port: 8080, // 端口
        open: false, // 是否打開瀏覽器
        overlay: { // 出現錯誤或者警告的時候，是否覆蓋頁面線上錯誤消息。
            warnings: true,
            errors: true
        },
        publicPath: '/', // 此路徑下的打包文件可在瀏覽器中訪問。
        // proxy: { // 設置代理
        //   "/api": { // 訪問api開頭的請求，會跳轉到  下面的target配置
        //     target: "http://192.168.0.100:8080",
        //     pathRewrite: {
        //       "^/api": "/xxx/api"
        //     }
        //   }
        // },
        quiet: false, // necessary for FriendlyErrorsPlugin. 啓用 quiet 後，除了初始啓動信息之外的任何內容都不會被打印到控制檯。這也意味着來自 webpack 的錯誤或警告在控制檯不可見。
        watchOptions: { // 監視文件相關的控制選項
            poll: true, // webpack 使用文件系統(file system)獲取文件改動的通知。在某些情況下，不會正常工作。例如，當使用 Network File System (NFS) 時。Vagrant 也有很多問題。在這些情況下，請使用輪詢. poll: true。當然 poll也可以設置成毫秒數，比如：  poll: 1000
            ignored: /(node_modules|bower_components)/, // 忽略監控的文件夾，正則
            aggregateTimeout: 300 // 默認值，當第一個文件更改，會在重新構建前增加延遲
        }
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/, // 加快編譯速度，不包含node_modules文件夾內容
                use: [
                    {
                        loader: 'babel-loader'
                    },
                    {
                        loader: 'eslint-loader',
                        options: {
                            fix: true
                        }
                    }
                ]
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader', {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    }, {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: (loader) => [autoprefixer({ browsers: ['> 0.15% in CN'] })]
                        }
                    }, {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }, {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000
                        }
                    }
                ]
            }, {
                test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000
                        }
                    }, {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            optipng: {
                                enabled: false
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false
                            },
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[id].css' }),
        new CleanWebpackPlugin(),
        new webpack.NamedModulesPlugin(), // 更容易查看(patch)的依賴
        new webpack.HotModuleReplacementPlugin(), // 替換插件
        new webpack.DefinePlugin({
            'SERVER_URL':JSON.stringify('http://www.sina.com')
        }),
        new HtmlWebpackPlugin({
            title: 'JISQ', // 默認值：Webpack App
            filename: 'index.html', // 默認值： 'index.html'
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeAttributeQuotes: true, // 移除屬性的引號
            },
            template: path.resolve(__dirname, 'index.html')
        }),
        new BundleAnalyzerPlugin()
    ],
    optimization: {},
    externals: {
        jquery: "jQuery"
    }
};