玩转webpack之webpack的entry output

webpack的入口配置项表示要配置的文件就是开发环境或者生产环境

浏览器本身不能认识的一些东西必须经过webpack的编译才能认识，但是要去写的时候我们经常用到预编译什么的比如scss比如jsx甚至vue的文件后缀名是vue而不是js，这种开发环境我们可以更加清晰明确的书写我们的代码。更加高效的开发。

首先创建文件目录。

dist用于生产上线 src用于开发，就是src是入口，dist是出口

要将src的header和index转化放到dist里

module.exports = {

    entry: {

        main: './src/js/page/index.qm',

        header:'./src/js/page/header.qm'

    },

    output: {

        path:__dirname+'/dist/js/page',

        filename:'[name].js'

    }

};

main和header指向两个qm文件，filename表示我们编译产生的文件为[name]就是main和header,__dirname是当前文件的绝对路径，我们可以在./dist/js/page文件夹下边生成两个js文件

入口文件可以是一个字符串

　　entry: './src/js/page/index.qm',

也可以是一个对象包含多个键值对

　　entry: {

     　　main:'./src/js/page/index.qm',

     　　header:'./src/js/page/header.qm'

　　},

也可以是一个数组

　　entry: [

        './src/js/page/index.qm',

        './src/js/page/header.qm'

    ],

context配置文件的目录，然后entry不必写重复的配置了。

    context:__dirname+'/src/js/page/',

    entry: [

        './index.qm',

        './header.qm'

    ],

现在就可以知道entry可以输入数组对象字符串，对象是为了输出多个文件，context可以简化entry的书写。

然后学下一个知识点

巴特西

玩转webpack之webpack的entry output

最新文章

热门文章