webpack.config.js 打包配置文件

含注释的讲解

/**
 * webpack.config.js 打包配置文件
 */

//引用path模块
const path = require('path');
//引入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入 提取js中的css代码的插件(打包)
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//将css文件及代码进行极致压缩
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {  //commrnt.js语法
    //入口文件
    entry: './src/js/index.js',
    //打包后的出口文件
    output: {
        // 输出的绝对路径
        path: path.resolve(__dirname, 'dist'),
        // 输出的文件名字   [name]表示按原名
        filename: 'js/[name].js',
        publicPath: './'
    },
    //loader的配置
    module: {
        // 详细的loader配置
        rules: [
            // 这里打包css文件
            {
                test: /\.css$/,  // 正则匹配
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                //css-loader:将css文件能够让webpack识别
                }, 'css-loader']
            },
            {
                test: /.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader', 'less-loader']
            },
            {
                test: /.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    name: '[hash:16].[ext]', //图片输出的名字hash长度16位 默认32位
                    limit: 70 * 1024, //限制 小于30kb base64处理
                    esModule: false,
                    outputPath: 'img'
                }
            },
            {
                test: /.html$/,
                loader: 'html-loader'
            },
            {
                test: /.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'fonts'   //输出的目录
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader', // loader 编译es6为es5
                exclude: /node_modules/ // 排除
            }
        ]
    },
    // 插件
    plugins: [
        // 直接引用函数插件 new 插件名
        new HtmlWebpackPlugin({
            // 打包此路径
            template: './src/index.html',
            // 新的文件名
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css' // 输出到css文件夹里
        }),
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode: process.env.NODE_ENV,
    // 设置热跟新
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),// 启动服务器目录
        compress: true,// 启动gzip
        port: 8080, // 端口  8080 80  8081 8082
        open: true, // 自动打开服务
        open:'chrome' // 默认谷歌浏览器打开(可忽略)
        publicPath: '/', // 静态资源查找路径
        openPage: 'index.html', // 打开的页面
    },
    target: 'web', // 目标是浏览器
}

纯净版

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js',
        publicPath: './'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|gif|jpeg|webp)$/i,
                loader: 'url-loader',
                options: {
                    name: '[hash:16].[ext]',
                    limit: 30 * 1024,
                    esModule: false,
                    outputPath: 'img'
                }
            },
            {

                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'fonts'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),
    ],
    mode: 'development',
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 80,
        open: true,
        open: 'chrome',
        publicPath: '/',
        openPage: 'index.html',
    },
    target: 'web',
}