webpack教程_由浅入深的webpack配置

前言

少侠，愿你页底归来，已习得webpack精要。

那些你熟悉的概念

那些你熟悉的概念

入口起点

• 字符串语法

module.exports = {
    entry: './usage/index.js'
}

• 数组语法
  向 entry 属性传入「文件路径（file path）数组」将创建多个主入口

module.exports = {
    entry: ['./plugins/hello.js','./usage/index.js']
}

问题：数组语法跟主入口文件引入依赖文件有什么区别？

• 对象语法

module.exports = {
    entry: {
        "usage.index": './usage/index.js',
        "usage.main": './usage/main.js'
    }
}

输出

const path = require('path');
module.exports = {
    entry: {
        "usage.index": './usage/index.js',
        "usage.main": './usage/main.js'
    },
 
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'usage/dist/js'),
        publicPath: '/js/'
    }
}

说明：
publicPath：声明资源对外链接，如上配置可以通过