webpack学习(八)-开发环境配置

鱼鱼大仙的猫 9/12/2020 webpack

现在，我们可以把前面学习的webpack配置统一配置一下，生成一个基础的webpack开发环境配置。

# 项目目录

开发环境配置
    -src
        -css
            //css资源
        -imgs
            //图片资源
        -js
            --index.js
        -media
            //其他资源
        --index.html
    --webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12

# webpack.config.js

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/build.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',
                    exModule: false,
                    outputPath: 'imgs'
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                exclude: /\.(html|css|js|less|jpg|png|gif)/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media'
                }
            }
        ],
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            })
        ],
        mode: 'development',
        devServer: {
            contentBase: resolve(__dirname, 'build'),
            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

# 说明

开发环境只需要代码能够运行即可，我们使用 webpack 打包输出结果，使用 npx webpack-dev-server 只会在内存中编译打包，没有输出。