webpack入坑笔记

1、下面是一段非常常规而且非常简单并且没有实际意义的webpack配置文件,里面有坑,在做配置的时候需要注意:
1.1:做多入口文件时,如果想打包后的文件名跟自己的文件名是一样的,在入口文件前请使用字符串写上自己想要的文件名,在很多资料里并没有提及这一点,都是写一个entry然后不做任何说明。
1.2:在配置模块里的rules规则时,test后面不需要加引号,往往在IDE里写代码的时候因为习惯敲了一个引号以后IDE会去自动补全,但是这样在最后打包的时候会提示“Module parse failed: Unexpected token”语法错误

// 引入NodeJs的Path模块
const path = require('path');
module.exports={
    // 入口文件配置
    entry:{
        'demo1':'./src/demo1.js',
        'demo2':'./src/demo2.js'
    },
    output:{
        filename:'js/[name].js',
        path:path.resolve(__dirname,'dist')
    },
    //模块:例如解读CSS,图片如何转换,压缩
    module:{
        rules:[
            {
                test:/\.css/,
                use:['style-loader','css-loader']
            }
        ]
    },
    //插件,用于生产模版和各项功能
    plugins:[],
    // 配置webpack开发服务功能
    devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址,可以使用IP也可以使用localhost
        host:'127.0.0.1',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:1717
    }
}

您可能会喜欢

发表评论

电子邮件地址不会被公开。 必填项已用*标注

在这输入验证码 : *

Reload Image