Webpack教程_webpack private-CSDN博客

本文链接：https://blog.csdn.net/qq_38951259/article/details/94404140

本文详细介绍Webpack的安装步骤，包括项目初始化、配置文件设置、Loader与Plugin的使用，以及开发服务器的配置，帮助初学者快速掌握Webpack的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装webpack

新建项目的目录，并将命令行切换到该目录下：

mkdir webpackdemo && cd webpackdemo

初始化项目（我们自己开发的npm包，）

npm init -y

把webpack和webpack-cli安装到项目本地

npm install webpack webpack-cli --save-dev

创建webpack配置文件webpack.config.js

echo “Hello Webpack” > webpack.config.js

在package.json文件配置npm scripts

"scripts": {

    "build": "webpack --config webpack.config.js"

  },

调整package.json文件，以便确保我们的项目是private(私有的)，并且移除 main 入口

{

  "name": "webpackdemo",

  "version": "1.0.0",

  "description": "webpack指南",

  -"main": "index.js",

  +"private": true

}

使用webpack

在webpack.config.js文件中导出一个对象，通过对象中的属性对webpack进行配置：

const path = require('path');



module.exports = {

    mode: 'development',      // 打包模式，目前配置的是开发模式

    entry: './src/index.js',  // 入口文件

    output: {                 // 输出文件的配置

        filename: 'main.js',

        path: path.resolve(__dirname, 'dist')

    }

}

使用loader

由于webpack原始只支持JavaScript的打包，不支持其他文件类型的打包，因此不同类型的文件我们不同的loader来处理它们。

使用css-loader和style-loader处理css文件：

npm install css-loader style-loader –save-dev

配置

   module: {

        rules: [

            {

                test: /\.css$/,

                use: ['style-loader', 'css-loader']

            }

        ]

    }

使用file-loader加载图片

npm install file-loader –save-dev

配置file-loader

module: {

        rules: [

            {

                test: /\.css$/,

                use: ['style-loader', 'css-loader']

            },

            {

                test: /\.(png|svg|jpg|gif)$/,

                use: ['file-loader']

            }

        ]

    }

使用plugin

插件（Plugin）是用来扩展webpack功能的。

HtmlWebpackPlugin

HtmlWebpackPlugin插件默认会生成一个index.html文件，用来替换原有文件，index.html文件的内容也会随着替换而改变。

安装插件

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

使用插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

    plugins: [

        new HtmlWebpackPlugin({

            title: 'Home',

            filename: 'home.html'

        })

    ]

CleanWebpackPlugin

该插件会在构建之前清理dist/文件夹。

安装插件

npm install clean-webpack-plugin --save-dev

配置插件

使用devServer

安装webpack-dev-server

npm install webpack-dev-server --save-dev

配置

    devServer: {

        contentBase: path.join(__dirname, 'dist'),

        port: 8080,

        index: 'home.html',

        hot: true,

        open: true,

        https: true

    }