配置文件的重要性

• 配置文件是webpack打包的依据，webpack如何打包，打包成什么样，全都由配置文件来指定
• 对于webpack来说，我们的主要工作也是编写、修改webpack的配置文件

核心概念有哪些

1.entry和output
2.loader
3.plugin

1.entry和output

image.png

如图就是告诉webpack，从当前目录下的app.js开始打包我们的代码，然后打包出来的结果代码也是从app.js开始运行

image.png

如图就是告诉webpack，我们所有的入口文件和他依赖的文件，全部都打包成一个bundle.js 。除此之外，入口文件还有一些其他的配置，比如publicPath，他会影响到一些资源的路径。

比如在demo文件夹下有如下几个文件：
1.app.js

import f1 from './module1.js'
f1()
let b=2

2.app2.js

let b=2
console.log(b)

3.module1.js

import m2 from './module2.js'
export default function(){
  console.log(m2)
}

4.module2.js

export default 14

5.webpack.config.js

module.exports = {
    // entry写法有很多（三种）
    // 1.可以是字符串
    entry:'./app.js',
    // 2.可以是数组,最终会把这两个入口文件的内容打包在一个入口文件中
    entry: ['./app.js', './app2.js'],
    // 3.平时更常用的是设置为对象
    entry: {
        // 指定一个入口叫app（入口名字随便取），他对应的文件为当前路径下的app.js
        // ,如果只写这一项,就表明只有一个入口文件，这就是我们的单页面应用 
        app: './app.js',
        // 还可以指定多入口,表示有两个入口文件，
        //这和上面的数组形式的区别在于：
        //数组形式还是会打包成一个文件，他还是一个单页面应用；
        //而在对象中指定两个入口，最终会打包成两个文件，就是多页面应用的打包方式
        app2:'./app2.js'
    },
    // output的值通常是一个对象
    output: {
        // filename为必填项，指定打包成哪个文件
        // 除了写固定的名字,我们通常会写成不固定的名字
        filename:'bundle.js',
        filename: '[name].[hash].js',
        // 这种不固定的名字最终会打包成app.sdfgd23bjk44534f.js
        // 对应关系为：name是入口的名字，hash是webpack根据文件名生成的hash
        // 这个hash还可以进行截取
        filename: '[name].[hash:6].js',
        // 表示这个hash截取前六位
        // 还可以指定打包文件的路径
        filename: './js/[name].[hash:6].js',
        // 他打包的结果，就会在打包的dist文件夹下的js文件夹下
        // filename只能指定打包文件在打包文件夹（dist文件夹）下的什么位置
        // path配置可以指定打包文件夹叫什么，在什么位置
        // path只能接受绝对路径，不可以是相对路径
        path: __dirname + '/src/mybundle'
        // __dirname表示此webpack.config.js所在目录的绝对路径，就是demo文件夹
        // 结果最终会在demo文件夹下的src文件夹下的mybundle.js中
    },
    // loader是写在module的rules数组中
    // 数组中的每一个对象都是一个loader处理
    module: {
        rules: [
            {
                // test表示这个loader要处理什么类型的文件，通常是一个正则对象
                test: /\.js$/,
                // use表示我们处理这种类型的文件使用什么loader 
                // use后面可以是数组，对象，字符串
                use:'babel-loader',
                // 但是我们通常需要对我们的loader进行一些配置，所以写成对象
                use: {
                    loader: 'babel-loader',
                    option: {
                        // 对babelloader的配置就写在这个对象中
                    }
                },
                // 对这种类型的文件有多个loader时就使用数组
                use:[]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

2.loader

loader是webpack中的核心编译方法

image.png

常用loader有：

image.png

很多语法糖的loader：比如vue-loader，ts-loader

3.plugin

image.png

loader是定义的一系列基本处理，让webpack可以处理各种各样的东西
plugin插件是提供给webpack的一系列扩展，让webpack具有额外的功能

常用plugin有：

image.png

commonChunkPlugin提取公共模块
HtmlWebpackPlugin把打包结果中打包出一个HTML，把打包结果自动的引入HTML