webpack 基础配置解析

1. 入口文件和出口文件

• 单入口文件

entry 路径：

• 如果是相对地址，则相对于context的地址，context如果没有配置，则默认为配置文件所在根目录地址
• 如果是绝对地址 则不受context的影响，按照绝对地址配置

出口文件配置 output

• filename: 打包之后文件名称
• path: 打包文件的路径（绝对路径）

module.exports = {
  entry: './main.js',  // 入口文件 main.js 
  output: {
    filename: 'bundle.js', //将main 文件打包之后的文件为bundle.js文件
    path: path.resolve(__dirname, 'dist') // 必须绝对路径
  }
};

• 多入口文件

module.exports = {
  entry: {
    bundle1: './main1.js', //入口文件多个
    bundle2: './main2.js'
  },
  output: {
    filename: '[name].js', //出口文件也是多个 参数name的值为bundle1 或 bundle2
    path: path.resolve(__dirname, 'dist')  // 必须绝对路径
  }
};

2. mode 模式

• development
• production

3. loader

loader 的特点是希望每个loader 的用处单一；loader在配置的时候可以配置成字符串也可以配置成对象，还可以配置成数组的形式；loader的执行顺序是从下到上，从右向左执行

• url-loader 打包图片

{
    test: /\.(jpg|jpeg|gif|png|svg)$/,
    use: {
            loader: 'url-loader',
            options: {
                limit: false // 文件大小超过这个限制之后就保留文件，没有超过这个大小就会压缩成base64格式，base64大小会比原始的文件大小大出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 语法的
                                '@babel/plugin-proposal-class-properties',
                                '@babel/plugin-transform-runtime'
                    ]
                }
            }
        ],
        exclude: /node_modules/ // loader不去解析 模块中的数据 优化
    }

• 解析css 文件并将css 文件抽离

style-loader 的作用是将 css文件插入到html文件的header标签中

{
    test: /\.css/,
    exclude: /node_modules/,
    use: [
        MiniCssExtractPlugin.loader,
        // css-loader 解析 @import()这种语法
        {
            loader: 'css-loader', 
            // 作用是将@import()进来的文件也可以都通过postcss-loader添加上css前缀
            options: { importLoaders: 1 } 
        },
        'postcss-loader'
    ]
},

4. resolve

配置一些别名 和一些默认的扩展名; 别名直接可以再js或jsx 或者vue中使用，默认的扩展名则是在引入这些文件时不需要加入文件的扩展名，会默认按照配置的扩展名进行匹配；

{
    alias: {
        // 别名
    },
    extensions: ['.js', '.css', 'vue'] // 默认扩展名
}

5. plugins

插件是个数组 ，执行顺序没有先后

• webpack.ProvidePlugin 给每个引用到的模块引入组件

 new webpack.ProvidePlugin({
    // 为每个用到该模块的引入模块   DefinePlugin 是定义变量； ProvidePlugin 是引入模块
    $: 'jquery'
 }),

• webpack.DefinePlugin

区分不同环境，给不同环境定义不同的变量

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

6. devServer

开发服务器，需要安装 webpack-dev-server

{
    // 开发服务器 端口
    port: 3000,
    // 显示进度信息
    progress: true,
    // 默认打开的文件夹地址
    contentBase: './dist'
    // 跨域代理
    // proxy: {
    //     api: {
    //        target: 'http://localhost:8080',
            //pathRewrite: { '/api': '' } //重写路径
    //}
    // },
    // 前端模拟数据
    // before(app) {
    //     // 提供的方法
    // }
    // 有服务端 不想用代理来处理能不能在服务端中启动webpack端口用服务端端口，直接在服务端调用webapck启动
}

7. watch

监听文件变化 然后动态打包

watch: false,
// 监控当前代码变化参数配置
watchOptions: {},