webpack之基础配置

entry

  • 单入口:entry是一个字符串
    entry: './src/index.js'
    
  • 多入口:entry是一个对象
    entry: {
      index: './src/index.js',
      search: './src/search.js'
    }
    

output

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

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

核心概念之Loaders

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

常用的Loaders有哪些?

常用Loaders

Loaders的用法

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

核心概念之Plugins

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

常见的Plugins有哪些?

常用plugins

Plugins的用法

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

核心概念之Mode

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

Mode的内置函数功能

Mode的内置函数

你可能感兴趣的:(webpack之基础配置)