Webpack 开发环境配置 - 02

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1. 创建配置文件

1.1 创建 webpack.config.js 文件

1.2 基本配置内容

const { resolve } = require('path')

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 输出位置
    output: {
        filename: 'built.js',
        // __dirname nodejs的变量，代表当前文件目录绝对路径
        path: resolve(__dirname, 'build')
    },
    // plugins配置
    plugins: [],
    // 模式 development 开发环境，production 生产环境
    mode: 'development'
}

1.3 运行 npm run dev

查看配置是否正确，然后进行下面打包资源。

2. 打包样式资源

2.1 打包 css 资源

第一步：需要下载 style-loader 和 css-loader

npm i css-loader style-loader -D

第二步：修改配置文件

const { resolve } = require('path')

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 输出位置
    output: {
        filename: 'built.js',
        // __dirname nodejs的变量，代表当前文件目录绝对路径
        path: resolve(__dirname, 'build')
    },
// loader配置
    module: {
        rules: [
            {
                // 匹配哪些文件
                test: /.css$/,
                // use 数组中 loader 执行顺序：从右到左，从下到上 依次执行 
                // 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    // plugins配置
    plugins: [],
    // 模式 development 开发环境，production 生产环境
    mode: 'development'
}

第三步：运行 npm run dev 查看效果

2.2 打包 less 资源

第一步：需要下载 less-loader 和 less

npm i less-loader less -D

第二步：修改配置文件

const { resolve } = require('path')

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 输出位置
    output: {
        filename: 'built.js',
        // __dirname nodejs的变量，代表当前文件目录绝对路径
        path: resolve(__dirname, 'build')
    },
// loader配置
    module: {
        rules: [
            {
                // 匹配哪些文件
                test: /.css$/,
                // use 数组中 loader 执行顺序：从右到左，从下到上 依次执行 
                // 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                // 将 less 文件编译成 css 文件 
                // 需要下载 less-loader
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    },
    // plugins配置
    plugins: [],
    // 模式 development 开发环境，production 生产环境
    mode: 'development'
}

第三步：运行 npm run dev 查看效果

3. 打包html

第一步：下载plugin包

npm install --save-dev html-webpack-plugin

第二步：修改配置文件

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 输出位置
    output: {
        filename: 'built.js',
        // __dirname nodejs的变量，代表当前文件目录绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader配置
    module: {
        rules: [
            {
                // 匹配哪些文件
                test: /.css$/,
                // use 从右到左执行
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    },
    // plugins配置
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    // 模式 development 开发环境，production 生产环境
    mode: 'development'
}

注：配置文件需要引入插件 html-webpack-plugin,在 plugins 中配置。

第三步：在./src 下面穿件 index.html 文件

第四步：运行 npm run dev 查看效果

4. 打包图片资源

第一步：下载安装loader包

npm install --save-dev html-loader url-loader file-loade

第二步：修改配置文件

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 输出位置
    output: {
        filename: 'built.js',
        // __dirname nodejs的变量，代表当前文件目录绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader配置
    module: {
        rules: [
            {
                // 匹配哪些文件
                test: /.css$/,
                // use 从右到左执行
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(jpg|png|gif|gpeg)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    esModule: false,
                    name: '[hash:10].[ext]'
                },
                type: 'javascript/auto'
            },
            {
                test: /.html$/,
                loader: 'html-loader'
            }
        ]
    },
    // plugins配置
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    // 模式 development 开发环境，production 生产环境
    mode: 'development'
}

注：如果是webpack5，可以直接使用 type: 'asset/resource'，如果是4版本，需要加上 type: 'javascript/auto'

第四步：运行 npm run dev 查看效果