webpack概念及安装配置、插件推荐

目录

1.什么是webpack？

初始化项目：

 2.安装webpack

3.在项目中配置 webpack

webpack中的默认规定：

webpack插件推荐

安装webpack-dev-server及配置

安装 html-webpack-plugin及配置

devServer节点

---

1.什么是webpack？

概念：webpack是前端项目工程化的具体解决方案。

主要、 性、性能优化等强大的功能。

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

目前vue、React等前端项目，基本上都是基于webpack进行工程化开发的。

初始化项目：

2. 新建项目空白目录，在空白目录下按住shift键并单击鼠标右键，点击
3. 在打开的窗口中运行npm init -y命令，初始化包管理配置文件package.json
4. 新建src源代码目录，新建src -> index.html首页和src -> index.js脚本文件
5. 初始化首页基本的结构
6. 运行npm install jquery  -S命令，安装jQuery，-S是将这个架包保存在dependencies里，不写也会被记录到里面，但是写了会更加明确；--save是-S的全称。
7. 通过ES6模块化的方式导入jQuery,实现列表隔行变色效果

 

 2.安装webpack

在vs code里打开项目，运行一个该项目的终端：点击运行--->新终端--->选择项目路径

在终端运行如下的命令，安装webpack相关的两个包:

npm install webpack@5.42.1 webpack-cli@4.7.2 --save-dev

-S 是 --save 的简写

-D 是 --save-dev 的简写，记录到开发阶段的包（"devDependencies"）

3.在项目中配置 webpack

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

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

}

development：开发模式

production：上线模式

结论：开发时候一定要用development, 因为追求的是打包的速度，而不是体积；反过来，发布上线的时候一定能要用production, 因为上线追求的是体积小，而不是打包速度快!

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

"scripts": {
        "dev": "webpack"    // script 节点下的脚本，可以通过npm run执行。例如npm run dev

}

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

webpack中的默认规定：

在webpack 4.x和5.x的版本中，有如下的默认约定：

①默认的打包入口文件为 src -> index.js

②默认的输出文件路径为 dist -> main.js

注意:可以在webpack.config.js中修改打包的默认约定

自定义打包的入口和出口

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

示例代码如下:

const path = require('path');      // 导入node.js 中专门操作路径的模块

module.exports = {

        entry: path.join(__dirname, './src/index.js'),   // 打包入口文件的路径

        output: {

                path:path.join(__dirname, './dist'),  // 输出文件的存放路径

                filename: 'bundle.js'    // 输出文件的名称

        }

}

如果修改了源代码，需要重新npm run dev 重新打包，才能实现功能。这样很麻烦，那怎么才能不麻烦呢？这需要使用webpack插件了，如下：

webpack插件推荐

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

① webpack-dev-server

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

 ② html-webpack-plugin

• webpack中的HTML插件(类似于一个模板引擎插件)
• 可以通过此插件自定制 index.html 页面的内容

安装webpack-dev-server及配置

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

npm install webpack-dev-server@3.11.2 -D

相关配置：

① 修改package.json -> scripts中的dev命令如下:

"scripts": {
        "dev": "webpack serve",      // script 节点下的脚本，可以通过npm run执行

}

②  再次运行npm run dev命令，重新进行项目的打包

③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

注意: webpack-dev-server 会启动一个实时打包的http服务器

那如何停止自动打包功能，只需要在处理界面一直闪烁的光标，按两次ctrl+c,就可以了。

 运行了后，得到如上结果，之后修改源代码保存，不会自动打包。

使用webpack-dev-server的坏处：

webpack-dev-server这个插件把生成的main.js文件放在内存里（放到内存里是看不见的），没有放在物理磁盘里（物理磁盘（看得见）就是项目根文件里，但是localback:8080/main.js能访问到生成的文件），

      如果你要访问最新的main.js文件，则访问内存里的main.js文件。只需要修改源文件index.js里的引用路径为<script src=”/main.js”></script>就可以访问内存中的main.js文件。

 

 

 如何将src文件夹里的index.html拷贝到项目根目录中？这样打开上面的网址就能直接访问的index.html文件.如果要实现以上功能，需安装下述插件（html-webpack-plugin）：

安装 html-webpack-plugin及配置

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

npm install html-webpack-plugin@5.3.2 -D

相关配置：

// 1.导入HTML 插件，得到一个构造函数
const HtmlPlugin = require( 'html-webpack-plugin')

// 2.创建HTML 插件的实例对象
const htmlPlugin = new HtmlPlugin( {
        template: ' ./src/index.html',      //指定原文件的存放路径
        filename: ' ./index .html',      //指定生成的文件名和存放路径
})

//使用Node.js中的导出语法，向外导出一个webpack 的配置对象

module.exports = {
        mode : 'development'
        plugins: [htmlPlugin],      // 3.通过plugins节点，使htmlPlugin 插件生效
}

 配置好后，运行 npm run dev ，就可以用那个网址打开，直接显示首页面。

解惑html-webpack-plugin

① 通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中

② HTML插件在生成的index.html页面，自动注入了打包的bundle.js文件

 

 解决上述问题：

devServer节点

在webpack.config.js配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置,
示例代码如下:

devServer: {
        open: true,      // 初次打包完成后，自动打开浏览器
        host: '127.0.0.1'，   // 实时打包所使用的主机地址
        port: 80,            //实时打包所使用的端口号
}

 注意:凡是修改了webpack.config.js配置文件,或修改了package.json配置文件,必须重启实时打包的服务器，否则最新的配置文件无法生效!