Webpack笔记「webpack配置知识」

最新推荐文章于 2023-06-07 09:15:37 发布

阳树阳树

最新推荐文章于 2023-06-07 09:15:37 发布

阅读量1.9k

点赞数

分类专栏： JS 文章标签： Vue Webpack websocket

本文链接：https://blog.csdn.net/weixin_60789461/article/details/124069878

版权

npm安装时-S -D分别的意思 -S 即--save（保存）包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在 -D 即--dev（开发）包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器

注意：在使用npm install一个插件的时候，需要添加上-s或-d，不然不会再package.json中显示。

3. 在项目中配置webpack

①在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

module.exports = {
    mode:'development' 
    // mode用来指定构建模式。可选值有development 和 production
}

②在 package.json 的 scripts 节点下，新增 dev 脚本如下：

“script”：{
    “dev” : "webpack" 
    // script 节点下的脚本，可以通过 npm run dev执行
}

③在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

mode的🉑️选值
(1)development
⚫开发环境
⚫不会对打包生成的文件进行代码压缩和性能优化
⚫打包速度快，适合在开发阶段使用
(2)production
⚫ 生产环境
⚫ 会对打包生成的文件进行代码压缩和性能优化
⚫ 打包速度很慢，仅适合在项目发布阶段使用

4. webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置

5.webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
注意：可以在 webpack.config.js 中修改打包的默认约定

6.自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。

module.exports = {
    entry: path.join(__dirname,'./scr/index.js'), //打包入口文件路径
    output：{
        path：path.join(__dirname,'./dist'), // 输出文件的存放路径
        filename：‘bundle.js’ //输出文件的名称
    }
}

webpack 中的插件

1. webpack 插件的作用

通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的 webpack 插件有如下两个：

① webpack-dev-server
⚫ 类似于 node.js 阶段用到的 nodemon 工具
⚫ 每当修改了源代码，webpack 会自动进行项目的打包和构建

② html-webpack-plugin
⚫ webpack 中的 HTML 插件（类似于一个模板引擎插件）
⚫ 可以通过此插件自定制 index.html 页面的内容

2. webpack-dev-server

webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。

2.1安装 webpack-dev-server

运行如下的命令，即可在项目中安装此插件：

npm install webpack-dev-server@3.11.2 -D

最低0.47元/天解锁文章

阳树阳树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack笔记「webpack配置知识」

目录webpack配置知识1. 什么是webpack？2. 在项目中安装webpack3.在项目中配置webpack4. webpack.config.js 文件的作用5.webpack 中的默认约定6.自定义打包的入口与出口webpack 中的插件1. webpack 插件的作用2. webpack-dev-server3. html-webpack-plugin4. devServer 节点webpack中的loader1. loader 概.
复制链接

扫一扫