webpack开发环境基本配置

最新推荐文章于 2024-11-01 10:18:14 发布

javscp_q

最新推荐文章于 2024-11-01 10:18:14 发布

阅读量96

点赞数 1

分类专栏： webpack 文章标签：前端 webpack

本文链接：https://blog.csdn.net/javcp_q/article/details/118996044

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习编写最基本的webpack.config.js文件

//webpack.config.js

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'js/build.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [{
            // 处理less资源
            test: /\.less$/,
            // loader需要按顺序加载
            use: [
                'style-loader',
                'css-loader',
                'less-loader'
            ]
        }, {
            // 处理html文件中的图片资源
            test: /\.html$/,
            loader: 'html-loader',
            options: {
                esModule: false // 关闭es6模块化，使用CommonJS语法
            }
        }, {
            // 处理样式文件中的图片资源并可优化图片资源
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options: {
                outputPath: 'image',
                limit: 12 * 1024 // 小于12kb的图片会变成base64格式的字符串
                // 项目中可用于减少向服务器的请求次数，但图片体积会变大，所以一般处理小图片
            }
        }, {
            // 处理其它资源
            exclude: /\.(html|css|less|js|jpg|png|gif)$/,
            loader: 'file-loader',
            options: {
                outputPath: 'media',
            }
        }]
    },
    plugins: [
        // 处理html资源
        new HtmlWebpackPlugin({
            // 以指定的html文件为模板，并自动引入出口文件
            template: './src/index.html'
        })
    ],
    mode: 'development'
}