webpack基础用法

基本概念之entry（依赖图的入口）

单入口（单页应用）：字符串

entry:"./src/index.js"

多入口（多页应用）：对象

entry:{
 index:"./src/index.js", //入口名称、路径
 search:"./src/search.js"
}

基本概念之Output

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

 entry:{
        index:"./src/index.js",
        search:"./src/search.js"
    },
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].js' //用[name]标识文件名称
    },

打包结果

image.png

基本概念之Loaders

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

基本概念之Plugins

从打包优化和压缩，一直到重新定义环境中的变量，可以用来处理各种各样的任务。

基本概念之mode

production(线上环境)、development(开发环境)、none

module.exports = {
  mode: 'production'
};