webpack之基础配置

entry

多入口：entry是一个对象

entry: {
  index: './src/index.js',
  search: './src/search.js'
}

output是用来告诉webpack如何将编译后的文件输出到磁盘

output 单入口配置

output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
}

output 多入口配置

output: {
  filename: '[name].js', // 通过占位符确保文件名称的唯一
  path: path.join(__dirname, 'dist')
}

webpack开箱即用只支持JS和JSON两种文件类型，通过Loaders去支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。
Loaders本身是一个函数，接受源文件作为参数，返回转换结果。

常用Loaders

module.exports = {
    module: {
        rules: [
            {test: /\.txt$/, use: 'raw-loader'} // test指定匹配规则，use指定使用的loader名称
        ]
    }
};

插件用于bundle文件的优化，资源管理和环境变量注入
作用于整个构建过程

常用plugins

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
};

这是在webpack4提出的一个概念，Mode 用来指定当前的构建环境是：production、development还是none。
设置mode可以使用webpack内置的函数，默认值为production。

Mode的内置函数

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。