webpack 基本属性配置

欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

const path = require('path')
module.exports = {
    entry: { // main是默认入口,也可以是多入口
        main: './src/main.js'
    },
    // 出口
    output: {
        filename: './build.js', // 指定js路径
        path: path.join(__dirname, '..', '', 'dist') // 最好是绝对路径
        // 代表上一级的dist
    },
    module: {
        // 一样的功能rules: webpack2.xx新加的
        loaders: [ // require('./a.css||./a.js')
            {
                test: /\.css$/,
                loader: 'style-loader!css=loader',
                //多个loader用!分割
                //顺序是反过来的 2!1  多个loader
            },
            {
                test: /\.(jpg|svg)$/,
                loaderL 'url-loader?limit=4096&name=[name].[ext]',
                // limit=4096&name=[name].[ext]' 多个参数之间用&符号分割
                //[name].[ext]内置提供的
                options: {
                    limit: 4096,
                    name: '[name].[ext]'
                }
            }
        ]  
    },
    plugins: [
        // 插件的执行顺序是依次执行的,和loader是反过来的
        new htmlWebpackPlugin({
            template: './src/index.html',
        })
        // 将src下的template属性描述的文件根据当前配置的output.path,将文件移动到该目录。
        // 在插件的执行过程中,它本身可以去拿当前所设置的webpack选项,便于对webpack选项的复用,
    ]
}

推荐阅读更多精彩内容

  • 人生到了暮年的时候 谁意料到自己会在病榻上度过余生 尤其对于一位孤独的老人 每日经受无数次五马分尸般揪心的疼痛 惊...
    善禾骏阅读 208评论 1 5
  • 电话里我听出来老爸和老妈最近闹矛盾了。 他们相互依偎扶持了大半辈子,我印象里闹矛盾的次数真真是屈指可数。 细问之下...
    巫女不WU阅读 106评论 0 1
  • 夜深人静、外面风雨声不断! 听不懂、看不惯的,唯有假装无所不谓, 然后在心里慢慢折腾,总有懂得的时刻! 风不能代表...
    百灵依米阅读 49评论 0 0
  • 在中国,有一种蔬菜是一年四季都能种植的,这种蔬菜非常有营养,可当蔬菜烹饪,也可当水果生食,几乎每家都会买它。 它就...
    壹点健康生活阅读 168评论 0 0