webpack的基本使用

webpack的基本使用

经过学习，我总结了webpack的基本使用流程如下：

1.什么是webpack

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

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

好处：让程序猿把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 注意点：目前企业级的前端项目开发中，绝大多数的项目都是基于webpack进行打包构建的。

2.创建列表隔行变色项目

• 1).新建项目空目录，并运行npm init -y命令，初始化包管理配置文件package.json

• 2).新建src源代码目录

• 3).新建src->index.html首页和src->index.js脚本文件

• 4).初始化首页基本的结构

• 5).运行npm install jquery -S命令，安装jQuery

• 6).通过ES6模块化的方式，导入jQuery，实现列表隔行变色效果

3.由于ES6在一些浏览器中不兼容，所以我们需要用webpack进行打包。

• 1.创建webpack.config.js文件

• 2.文件中键入：

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

• 3.更改package.json文件的部分代码：

 "scripts": {
        "dev": "webpack"//dev可执行脚本，名字可以自由定义。
        //指定的类型是webpack
    }

• 4.终端命令(说明：dev是你自己定义的脚本名)： npm run dev

• 5.执行成功后，将index.html文件中的，指向生成的文件，即：dist/main.js文件。

4.mode节点的可选值：

1.development:

开放环境

不会对打包生成的文件进行代码压缩和性能优化

打包速度块，适合在开发阶段使用

2.production:

生产环境

会对打包生成的文件进行代码压缩和性能优化

打包速度很慢，仅适合在项目发布阶段使用

webpack.config.js文件的作用：

webpack.config.js是webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

注意：由于webpack是基于node.js开发出来的打包工具，因此在他的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性化配置。

webpack中的默认约定：

在webpack中有如下默认约定：

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

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

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

🕹️自定义打包的入口与出口

在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'//输出文件的名称
    
  }
}

webpack中的插件

注意：由于每次修改index.js文件内容时，都要用npm命令重新发布，显得非常麻烦，所以需要用webpack的插件来解决这个问题。



#### 1.webpack插件的作用

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

  1. webpack-dev-server

    - 类似于node.js阶段用到的nodemon工具

    - 每当修改了源代码，webpack会自动进行项目的打包和构建

  1. 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.0 -D
//其中，3.11.0为版本号，如果想换成别的版本号，官网里找就行。-D是安装在此项目中。

  #### 2.2配置webpack-dev-server

  - 修改package.js→script中的dev命令

  "scripts": {
        "dev": "webpack serve" //script节点下的脚本，可以通过npm run命令执行
         //添加server后，就可以实时更新了。
    },

  - 再次运行npm run dev命令，重新进行打包

  - 输入http://localhost:8080/ 或者点击终端生成命令中的 [http://localhost:8080/](http://localhost:8080/) ,即可在浏览器打开生成的文件，浏览效果。

  #### 2.3开启实时打包后，生成的文件将不在本地物理磁盘下，而是在内存中，所以刷新浏览器，看不到变化效果。那么，打包的文件去哪儿了呢？

    1. 不配置webpack-dev-server的情况下，webpack打包生成的文件，会存放在实际的物理磁盘下。

      - 严格遵守开发者在webpack.config.js文件中的配置

      - 根据output节点指定路径存放

    1. 配置webpack-dev-server后，实时打包生成的文件，存放在了内存之中。

      - 不在根据output指定的路径，存放在实际物理磁盘上

      - 提高了实时打包输出的性能，因为内存比物理磁盘速度块很多。

  #### 2.4生成到内存中的文件该如何访问？

  webpack-dev-server生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。

  为此，我们可以将index.html中的脚本引用，修改成根目录下的生成文件：

<script src="/fire.js">
//这里的/代表根目录，fire.js是我在webpack.config.js中指定的生成文件，可自定义。
//修改好后，在去修改文件，访问文件，浏览器中就可以实时更新了。
</script>

### 3.html-webpack-plugin插件

html-webpack-plugin插件是webpack中的html插件，可以通过此插件自定制index.html页面的内容。

需求：通过html-webpack-plugin插件，将src目录下的index.html首页，复制到根目录中一份。

  #### 3.1安装html-webpack-plugin插件

npm install html-webpack-plugin@4.5.0 -D

  #### 3.2配置html-webpack-plugin

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

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


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

  #### 3.3两个注意点

  1. 通过html插件复制到项目根目录下的index.html，也被放入到了内存中。

  2. html插件在生成的index.html页面的底部，自动注入了打包的fire.js文件。

  当开启了实时打包的功能时，删除dist目录并不会造成影响，因为打包的文件是存放在内存中的，而实际物理磁盘中的dist目录，已经是旧版本的目录了。

### 4.devServer节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置

示例代码如下：

//devServer节点存在于module.exports中，和mode,plugins等同级别。
devServer:{
  open:true,//初次打包完成后，自动打开浏览器
  host:'127.0.0.1',//实时打包所生成的主机地址
  port:80 //实时打包所使用的端口号
}