webpack 基本配置

目录

1. 拆分配置和 merge

2. 启动本地服务 webpack-dev-server

3. 处理 ES6 babel-loader

4. 处理样式

5. 处理图片

6. 模块化

---

1. 拆分配置和 merge

• webpack.common.js
• webpack.dev.js
• webpack.prod.js

2. 启动本地服务 webpack-dev-server

devServer: {
        port: 8080,
        progress: true,  // 显示打包的进度条
        contentBase: distPath,  // 根目录
        open: true,  // 自动打开浏览器
        compress: true,  // 启动 gzip 压缩

        // 设置代理
        proxy: {
            // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
            '/api': 'http://localhost:3000',

            // 将本地 /api2/xxx 代理到 localhost:3000/xxx
            '/api2': {
                target: 'http://localhost:3000',
                pathRewrite: {
                    '/api2': ''
                }
            }
        }
    }

3. 处理 ES6 babel-loader

module.exports = {
    entry: path.join(srcPath, 'index'),
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: ['babel-loader'],
                include: srcPath,
                exclude: /node_modules/
            }
        ]
    }
}

// 需配置 babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": []
}

4. 处理样式

• 开发环境和生产环境都需要配置，所以写在 webpack.common.js 中
• less-loader：解析 less 语法，生成 css 文件
• postcss-loader：需配置 postcss.config.js（autoprefixer）补全浏览器前缀
• css-loader：加载 .css 文件
• style-loader：使用 <style> 将 css-loader 内部样式注入到 HTML 页面

// webpack.common.js

module: {
        rules: [
            {
                test: /\.css$/,
                // loader 的执行顺序是：从后往前
                loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
            },
            {
                test: /\.less$/,
                // 增加 'less-loader' ，注意顺序
                loader: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },

// postcss.config.js

module.exports = {
    plugins: [require('autoprefixer')] // 自动补全浏览器前缀
}

5. 处理图片

• 生产环境（url-loader）：小于5kb，直接以 base64 形式产出，减少一次 url 请求，减少 http 耗时，否则沿用 file-loader ，产出 url 地址
• 开发环境（file-loader）：直接引入图片 url

// webpack.dev.js

module: {
        rules: [
            // 直接引入图片 url
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
    },

// webpack.prod.js

module: {
        rules: [
            // 图片 - 考虑 base64 编码的情况
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 小于 5kb 的图片用 base64 格式产出
                        // 否则，依然延用 file-loader 的形式，产出 url 格式
                        limit: 5 * 1024,

                        // 打包到 img 目录下
                        outputPath: '/img1/',

                        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                    }
                }
            },
        ]
    },

6. 模块化

• import
• export