webpack的使用

什么是webpack？

webpack是前端的一个项目构建工具，它是基于Node.js开发出来的一个前端工具

主要功能

它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript 的兼容性、性能优化等强大的功能。

webpack的使用

1、安装webpack相应的包

 npm install webpack@5.42.1 webpack-cli@4.7.2 -D

2、在目录下的package.json 中的scripts加上以下代码

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",// 自带的
        "dev": "webpack --mode development", // 开发环境
        "build": "webpack --mode production" // 生产环境
    },

3、在根目录建立webpack.config.js

// 使用Node.js 中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    // mode 代表运行模式，可选值有两个
    // development（发展模式，就是项目还在开发中）
    // production（生产模式，就是项目完成，准备上线，这个模式需要改为prodution）
    mode: 'development'
};

4、在终端运行 npm run dev

此时目录会多出一个文件夹dist，里面还有个main.js，在html界面导入main.js。如果你在代码的js文件中使用了ES6语法，使用webpack就不会出现兼容性问题，webpack本身就有处理兼容性的问题。

在webpack 4.x和5.X的版本中，有如下的默认约定:
1、默认的打包入口文件为src -> index.js
2、默认的输出文件路径为dist -> main.js

如果你想更换该打包入口文件和输出文件的名称，你可以在webpack.config.js 配置文件中，通过 entry节点指定打包的入口。通过output节点指定打包的出口。示例代码如下:

module.exports = {
    // mode 代表运行模式，可选值有两个
    // development 开发时候用，因为追求打包速度而不是体积
    // production 布局上线用，因为追求体积而不是打包速度
    mode: 'development',
    // entry 指要处理哪个文件
    // 对当前目录下的 src/index1.js 文件进行处理
    entry: path.join(__dirname, './src/index1.js'),
    // output节点指定打包的出口
    output: {
    	// path 代表打包出来的路径 这里是指，打包在跟目录中的dist，如果没有dist文件夹，会新建一个，这个不写也没关系，默认是dist文件夹
        path: path.join(__dirname, 'dist'),
        // 最后打包出来的文件是 bundle.js
        filename: "bundle.js"
    }
};

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

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

（1）安装

npm install webpack-dev-server@3.11.2 -D

// 如果报错提示跟下面一样
[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
 
安装下 npm install webpack-cli --save-dev

（2）package.json 中的scripts有所改变

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1", // 自带的
        "dev": "webpack serve"
    },

（3）加载和引用内存中的bundle.js（dist下面的js文件）

<script src="/bundle.js"></script>

（4）启动webpack

npm run dev

（5）访问 http://localhost:8080/ 进入项目的根目录 点击src

2、html-webpack-plugin
webpack 中的HTML插件（类似于一个模板引擎插件)，可以通过此插件自定制index.html页面的内容,还会自动注入 dist中的bundle.js，不需要点击目录中的src，访问http://localhost:8080 直接打开浏览器

1、安装
npm install html-webpack-plugin

2、在 webpack.config.js 中导入 html-webpack-plugin 这个插件，的到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')

3、new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    //指定要复制哪个页面
    template: './src/index.html',
    // 指定复制出来的文件名和存放路径
    filename: './index.html',
})

4、在module.exports  添加 插件的数组，将来webpack在运行时，会加载并调用这些插件
plugins: [htmlPlugin]

5、访问 http://localhost:8080/ 直接进入到index.html

还有一个更简单的属性，懒人中的懒人，可以让我们每当修改项目中的代码，ctrl+S保存后，webpack工具自动给我们运行并且自动打开浏览器

devServer 首次打包成功之后，自动打开浏览器

// 在webpack.config.js 中配置
// 首次打包成功之后，自动打开浏览器
    devServer: {
        open: true,
        // 指定运行的主机地址
        host: '127.0.0.1',
        // 在http协议中，如果端口号是80，则可以被省略
        port: 80
    }

webpack的使用 简单介绍到这里，如果大家对我的博客文章有什么不懂，非常欢迎大家私信，或者我有哪里写的不对，也欢迎大家为我指出，大家一起加油！