webpack的基本使用详记

webpack是什么

webpack是为了让webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

为什么引入webpack

网页引入静态资源过多时，我们需要发起多次的二次请求去请求这些静态资源，这会造成我们的网页加载速度过慢，此外我们还需要处理错综复杂的依赖关系，为了解决上述问题，我们便引入了webapck前端自动化构建工具，他可以完美实现资源的合并、打包、压缩等诸多功能。

webpack的安装方式

• 安装方式一（全局安装）
  使用全局安装命令进行安装
  npm install webpack -g ，使用此命令的前提条件是已经安装好了node，这种方式的好处是只要电脑不卸载webpack,就不需要再次重新安装。
• 安装方式二 （本地安装）
  使用 npm install --save-dev webpack在项目根目录下安装项目依赖，这种方式需要在每一个新项目中都运行此命令进行安装。

初步使用webpack打包构建简单项目

1. 使用 npm init初始化项目，初始化项目时会出现下列操作：
   
   包括包名、版本、描述、入口文件等等，这些信息可以在初始化的时候填写，填写完成后会在项目根目录下生成一个package.json,后期如果有需要修改的可以在package.json中进行修改。
2. 使用npm install 命令来构建项目中的依赖。使用此命令后会在项目根目录下生成node_modules文件夹和package-lock.json文件。
3. 通过命令npm i jquery -S引入js
4. 可以在src目录中创建一个html文件和js文件。
5. 准备工作完成后，便可以运行项目了，首先把上步写的js文件通过命令 webpack .\src\main.js -o .\dist\bundle.js生成一个bundle.js文件，然后在html中引用。运行项目即可
   需要注意的是：webpack .\src\main.js .\dist\bundle.js去掉-o后会报以下错误

ERROR in multi ./src/main.js ./dist/bundle.js
Module not found: Error: Can't resolve './dist/bundle.js' in '/Users/spring/Desktop/学习/技术相关/code/前端/Vue/hrose/day5/webpack-demo'
 @ multi ./src/main.js ./dist/bundle.js main[1]

这种问题是因为webpack的使用版本过高引起的。使用-o之后还有一个警告:

通过警告文字我们不难看出，他是想让我们指定一个环境是development还是production ,我们只需在上述命令下再加一个--mode development或者--mode production即可。

webpack命令运行的演变方式

webpack .\src\main.js -o .\dist\bundle.js

这种方式是直接在webpack命令上指定入口文件和出口文件，但是由于每次更改js文件后都需要重新编译运行，所以后缀名太长不利于书写，太麻烦。

webpack

这种方式是把入口文件放在配置文件中进行配置。
在项目根目录下创建webpack.config.js文件，指定webpack的入口和出口文件

const path = require('path')
module.exports = {
    entry: path.join(__dirname,'./src/main.js'), //入口文件
    output: {
        path: path.join(__dirname,'./dist'), //出口文件路径
        filename: 'bundle.js'  //文件名
    }
}

这种方式只是写法上简便了而已，还是需要每次都编译运行，刷新页面方可出现效果。

npm run dev

首先需要安装插件webpack-dev-server，然后在package.json中的scripts中添加一行"dev": "webpack-dev-server" ，之后即可通过npm run dev命令运行项目，在运行项目时可能会提示安装webpack-cli，安装后即可正常运行项目
webpack-dev-sever的几个常用命令

• --open：在浏览器中打开页面
• --port 3000:指定在哪个端口下打开
• contentBase src:打开根目录下src下面的目录
• --hot:热配置

相关插件

1. html-webpack-plugin：他会将磁盘上的js代码加载到内存中，提高代码的运行速度