webpack快速上手之：webpack.config.js

最新推荐文章于 2022-10-25 16:00:09 发布

小欢不欢

最新推荐文章于 2022-10-25 16:00:09 发布

阅读量310

点赞数

文章标签： javascript webpack 前端

本文链接：https://blog.csdn.net/m0_46407169/article/details/126547226

版权

// 进行配置对象
// 安装html-webpack-Plugin
let HtmlWebpackPlugin = require(‘html-webpack-plugin’)

let path = require(“path”)
module.exports = {
//入口文件
entry:“./src/index.js”,
output:{
//输出文件名称
filename:“bundle.js”,
//输出的路径
//绝对路径
path:path.resolve(__dirname,‘dist’)
},
//开发模式
// production
mode:“development”,
//loader的配置
module:{
//对某个格式的文件进行转化处理
rules:[
{
test:/.css $KaTeX parse error: Expected 'EOF', got '}' at position 250: \dots ] }̲, {\dots$ /,

            loader:'url-loader',
            // 进行内容的限制。图片小于8kb，base64位，会使得体积更大
            options:{
                limit:8*1024,
                // url-loader的es6解析给关掉
                esModule:false,
                // [Hash:10]取图片hash的前10位
                //[ext]取图片的扩展名
                name:'[hash:10].[ext]'
            },
            type:'javascript/auto'
        },
        {
            test:/\.html$/,
            loader:'html-loader'
        }
    ]
},
// 进行plugins插件的配置
plugins:[
   new HtmlWebpackPlugin(
    {
        template:'./src/index.html'
    }
   )
],
devServer:{
    //项目构建路径
    // static:path.resolve(__dirname,'dist'),
    static: { // static: ['assets']
        directory: path.join(__dirname, 'dist')
    },
    //启动编码的压缩
    compress:true,
    port:3000,
    //自动打开
    open:true
}

}