1. 入口文件和出口文件

• 單入口文件

entry 路徑：

• 如果是相對(duì)地址，則相對(duì)于context的地址，context如果沒有配置，則默認(rèn)為配置文件所在根目錄地址
• 如果是絕對(duì)地址 則不受context的影響，按照絕對(duì)地址配置

出口文件配置 output

• filename: 打包之后文件名稱
• path: 打包文件的路徑（絕對(duì)路徑）

module.exports = {
  entry: './main.js',  // 入口文件 main.js 
  output: {
    filename: 'bundle.js', //將main 文件打包之后的文件為bundle.js文件
    path: path.resolve(__dirname, 'dist') // 必須絕對(duì)路徑
  }
};

• 多入口文件

module.exports = {
  entry: {
    bundle1: './main1.js', //入口文件多個(gè)
    bundle2: './main2.js'
  },
  output: {
    filename: '[name].js', //出口文件也是多個(gè) 參數(shù)name的值為bundle1 或 bundle2
    path: path.resolve(__dirname, 'dist')  // 必須絕對(duì)路徑
  }
};

2. mode 模式

• development
• production

3. loader

loader 的特點(diǎn)是希望每個(gè)loader 的用處單一；loader在配置的時(shí)候可以配置成字符串也可以配置成對(duì)象，還可以配置成數(shù)組的形式；loader的執(zhí)行順序是從下到上，從右向左執(zhí)行

• url-loader 打包圖片

{
    test: /\.(jpg|jpeg|gif|png|svg)$/,
    use: {
            loader: 'url-loader',
            options: {
                limit: false // 文件大小超過這個(gè)限制之后就保留文件，沒有超過這個(gè)大小就會(huì)壓縮成base64格式，base64大小會(huì)比原始的文件大小大出30%左右
            }
        }
    },

• babel-loader 解析js文件

{
    test: /\.js$/,
        use: [
            {
                loader: 'babel-loader',
                options: {
                    // 用babel-loader 需要吧es6 => es5
                    presets: [
                                '@babel/preset-env',
                                // 支持 jsx
                                '@babel/preset-react'
                    ],
                    plugins: [
                                //  支持es7 語(yǔ)法的
                                '@babel/plugin-proposal-class-properties',
                                '@babel/plugin-transform-runtime'
                    ]
                }
            }
        ],
        exclude: /node_modules/ // loader不去解析 模塊中的數(shù)據(jù) 優(yōu)化
    }

• 解析css 文件并將css 文件抽離

style-loader 的作用是將 css文件插入到html文件的header標(biāo)簽中

{
    test: /\.css/,
    exclude: /node_modules/,
    use: [
        MiniCssExtractPlugin.loader,
        // css-loader 解析 @import()這種語(yǔ)法
        {
            loader: 'css-loader', 
            // 作用是將@import()進(jìn)來的文件也可以都通過postcss-loader添加上css前綴
            options: { importLoaders: 1 } 
        },
        'postcss-loader'
    ]
},

4. resolve

配置一些別名 和一些默認(rèn)的擴(kuò)展名; 別名直接可以再js或jsx 或者vue中使用，默認(rèn)的擴(kuò)展名則是在引入這些文件時(shí)不需要加入文件的擴(kuò)展名，會(huì)默認(rèn)按照配置的擴(kuò)展名進(jìn)行匹配；

{
    alias: {
        // 別名
    },
    extensions: ['.js', '.css', 'vue'] // 默認(rèn)擴(kuò)展名
}

5. plugins

插件是個(gè)數(shù)組 ，執(zhí)行順序沒有先后

• webpack.ProvidePlugin 給每個(gè)引用到的模塊引入組件

 new webpack.ProvidePlugin({
    // 為每個(gè)用到該模塊的引入模塊   DefinePlugin 是定義變量； ProvidePlugin 是引入模塊
    $: 'jquery'
 }),

• webpack.DefinePlugin

區(qū)分不同環(huán)境，給不同環(huán)境定義不同的變量

new webpack.DefinePlugin({
    dev: 'dev',
    test: 'test'
 }),

6. devServer

開發(fā)服務(wù)器，需要安裝 webpack-dev-server

{
    // 開發(fā)服務(wù)器 端口
    port: 3000,
    // 顯示進(jìn)度信息
    progress: true,
    // 默認(rèn)打開的文件夾地址
    contentBase: './dist'
    // 跨域代理
    // proxy: {
    //     api: {
    //        target: 'http://localhost:8080',
            //pathRewrite: { '/api': '' } //重寫路徑
    //}
    // },
    // 前端模擬數(shù)據(jù)
    // before(app) {
    //     // 提供的方法
    // }
    // 有服務(wù)端 不想用代理來處理能不能在服務(wù)端中啟動(dòng)webpack端口用服務(wù)端端口，直接在服務(wù)端調(diào)用webapck啟動(dòng)
}

7. watch

監(jiān)聽文件變化 然后動(dòng)態(tài)打包

watch: false,
// 監(jiān)控當(dāng)前代碼變化參數(shù)配置
watchOptions: {},