尚硅谷Webpack实战教程基础配置

Webpack基本配置 通俗易懂

// 设置webpack基础配置
// 开发环境配置： 能让代码运行
// 运行项目指令
//   webpack  会将打包结果输出出去
//   npx webpack-dev-server 只会在内存中编译打包, 没有输出
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 入口文件
    entry: './src/js/indx.js',
    // 输出
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // loader的配置
            // 要使用多个loader 要是use 单个就使用loader
            {
                // 处理less资源
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                // 处理css资源
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                // 处理图片资源
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    // 图片小于8M的会转成base64处理的
                    limit: 8*1024,
                    // 命名去前哈希值前10位和后缀名拼接
                    name: '[hash:10].[ext]',
                    // 关闭es6模块化
                    esModule: false,
                    // 打包完成后放到imgs文件夹下面
                    outputPath: 'imgs'   
                }
            },
            {
                // 处理html中img资源
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                // 处理其他资源
                exclude: /\.(html|js|css|less|jpg|png|gif)/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media'   
                }
            }
        ]
    },
    plugins: [
        // plugins 的相关配置
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development',
    // 进行热更新 只要哟变化就会自动打包运行
    devServer: {
        // 打包后放到build文件夹
        contentBase: resolve(__dirname, 'build'),
        // 空气Gzip压缩
        compress: true,
        // 默认端口号
        port: 3000,
        //运行成功后自动打开浏览器 
        open: true
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80