配置常用webpack

最新推荐文章于 2024-09-24 13:19:33 发布

寒枫

最新推荐文章于 2024-09-24 13:19:33 发布

阅读量101

点赞数

分类专栏：构建工具文章标签： webpack

本文链接：https://blog.csdn.net/qq379682421/article/details/100126950

版权

构建工具专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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
    },
    
}