webpack的使用

最新推荐文章于 2025-06-04 16:24:41 发布

原创最新推荐文章于 2025-06-04 16:24:41 发布 · 286 阅读

CC 4.0 BY-SA版权

本文介绍了Webpack的相关知识，包括其作为静态模块打包器的作用，以及全局和局部安装方法。还阐述了打包操作、压缩代码模式、配置方法，涉及入口、出口、loader和插件等核心概念。此外，介绍了本地服务、loader使用、html图片支持、css提取分离和babel等内容。

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

1、webpack可以干什么？

它是一个静态模块打包器；css、html、js都被打包为一行，去除多余的回车、空格、引号，开发阶段不需要打包，项目上线时，需要打包代码；

2、全局安装

npm install webpack -g

npm install webpack-cli -g

3、局部安装

npm install webpack -s

npm install webpack-cli -s

4、打包 (webpack命令可以只打包js)

默认的入口： src/index.js

默认的出口：dist/main.js

5、压缩代码的模式

webpack --mode production（生产模式）

webpack --mode development（开发模式）

6、webpack的配置

webpack默认只打包js文件，如果要打包html,css，需要做相应的配置

四个核心概念：

1、入口

2、出口

3、loader

4、插件

配置文件：webpack.config.js

7、本地服务webpack-dev-server

1)、安装webpack-dev-server npm install webpack-dev-server -s

2)、配置webpack.config.js

devServer: { contentBase: "./public",//本地服务的路径 inline: true,//实时刷新 }

3)、package.json配置：

"dev": "webpack-dev-server --open --inline"

8、loader

npm install css-loader style-loader -s

npm install file-loader -s

file-loader和url-loader的区别：https://blog.youkuaiyun.com/huangpb123/article/details/78561963
9、插件

html-webpack-plugin

 plugins: [
    new HtmlWebpackPlugin({
        template: "./src/index.html",
        minify: {
            removeAttributeQuotes: true,//去除多余引号
            removeComments: true,//去除注释
            removeEmptyAttributes: true,//去除空属性
            collapseWhitespace: true//去除空格回车
        }
    })
]