webpack

webpack
中文网：https://www.webpackjs.com/

一、webpack是什么？ 4.x
webpack是一个现代javascript应用程序的静态模块打包器（module bundler）。

webpack简单的说一个模块打包器。

二、为什么要使用webpack？webpack能解决什么问题？
现在很多的网页都可以看做是功能丰富的应用，他们拥有着复杂的javascript代码和一大推依赖包。为了解决这个问题，前端社区涌现出了很多好的实践方法。

a:模块化 requirejs 我们可以把复杂的程序细化为小的文件。

b:scss,less等css预处理器

c:.vue文件

d: ES6语法

…

以上这些浏览器都不能直接识别，都需要经过额外的处理之后才能让浏览器识别，而我们手动去繁琐，webpack就可以帮我们解决这些问题。
三、webpack和grunt及gulp相比有什么特性？
grunt和gulp是一种能够优化前端开发流程的工具。

grunt和gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩的具体步骤，这个工具可以帮你自动完成这些任务。

webpack是一种模块化的解决方案。

webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js）,webpack将从这个文件开始找到你的项目的所有依赖文件，使用loader处理它们，最后打包为一个浏览器可识别的javascript文件。

1> 打包 (依赖关系，把多个文件打包成一个文件，减少请求，服务器的压力)

2> 转化 (比如：sass jsx、vue) 需要使用loader

3> 优化 (SPA越来越流行，webpack可以对你的项目进行优化)

四、webpack可以很好的实现如下目标：
1>将依赖树拆分成按需加载的模块

2>初始化加载时耗时尽量少

3>各种静态资源都可以视作模块（css,js,模块，…）

4>将第三方库整合成模块的能力,可以自己配置

5>适合大型项目，无论是单页面还是多页面

五、开始学习webpack
1、webpack安装

webpack基于nodejs，必须要保证你的电脑安装过nodejs

本地安装webpack —> 推荐

npm install webpack --save-dev

webpack 4.x版本需要安装webpack-cli

npm install webpack-cli --save-dev

全局安装webpack —> 不推荐

npm install webpack -g

六、基于commonjs的模块实现

既然webpack可以让我们使用模块化的方式编写代码。

第一步：构建一个项目目录，如下：

第二步：定义模块，如下：

第三步：在app.js中引入模块，如下：

第四步：在index.html中引入app.js，如下：

在浏览器中查看：

第五步：执行webpack app.js -o bundle.js

webpack 入口文件 -o 出口文件

在index.html中引bundle.js

在浏览器中查看：

七、webpack是如何工作的？
针对上面的案例，看看webpack是如何工作的

在执行webpack app.js -o bundle.js时，webpack会读取app.js，在app.js中有一个require语句，需要在读取a.js。

在这个案例中，到a.js所有的依赖的模块查找完毕。在实际工作中，有更长的模块加载链，需要加载很多次，直到没有require为止。

所有的模块查找完毕之后，就会分析这些依赖的模块（文件），然后就开始打包，最后生成一个最终文件。
这是最后生成的文件:

说明：所有引入的文件，最终都会打包到bundle.js中，这是我们为什么 只引入一个文件的原因。

再举一个es6模块的例子，

说明webpack对commonjs和es6模块都有很好的支持

八、在工作中使用webpack
在刚才的两个案例中，每次需要手动编写命令执行，非常繁琐。

实际上是可以简化，并且还可以提供更强大的功能。

八、webpack的四大核心概念：
入口 （entry）：入口起点，告诉webpack应该使用哪个模块，来构建其内部依赖的开始。

entry的值数据类型： string|array|object

入口分两种情况：单个入口，多个入口

1>单入口

module.exports = {
    entry:'./app.js'
}

只指定入口文件，会默认输出到dist目录下的main.js文件内

 module.exports = {
    entry:{
        app:'./app.js'
    }
}

只指定入口文件，值为对象时，会输出到dist目录下的app.js文件内

module.exports = {
    entry:['./app.js','./detail.js']
}

只指定入口文件，其值为数组时，多个入口文件，但是最后会输出到dist文件下的main.js内（一个文件）
2>多入口：entry：{entryChunkName:string|array} 一般用在多页面开发时

    module.exports = {
        entry:{
            app:'./app.js',
            detail:'./detail.js'
        }
    }

只指定入口文件，其值为对象，多入口文件，会分别输出到dist文件下的对应的文件内
出口 （output）告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为’./dist

module.exports = {
        entry:{
            app:'./app.js'
        },
        output:{
            filename: '[name]-[hash].js'             //name对应entry对象里面的对应键名
            path：path.join(__dirname,'./bundle')    //目标输出目录的绝对路径
        }
    }

注：path:绝对路径，需要path模块拼接一下路径,直接写：'/bundle'会直接输出到d:的根目录下

加载器 （loader）：loader让webpack能够去处理那些非javascript文件（webpack自身只理解javascript）。
注：test的值为正则，切记不能加引号。

webpack的目标是，让webpack聚焦于项目中的所有资源，而浏览器不需要去关注考虑这些。webpack把每个文件（js,css,less,scss,图片等）都作为模块处理。

loader用于将模块的源代码进行转换。

**注：有了webpack之后，前端的模块不仅仅限于js的模块化，也包括css、less、vue、react等，都是模块化开发。**

loader参数：

    1>test属性，用于识别出应该被对应的loader进行转换的某个或某些文件。
    
    2>use属性，表示进行转换时，应该使用哪个loader。
    
    3>loader
    
    4>options:object 对当前loader的配置

常用的loader
module:{ rules:[ { 所有属性如下图 } ] }

注：use的值可以是string，array，object三种类型。

1.babel-loader

babel-loader 8.x版本

安装 npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

ES6模块导入导出可以编译

babel-loader 7.x

安装 npm install babel-loader babel-core babel-preset-env webpack

ES6 模块导入导出不能编译

2.样式 sass-loader css-loader style-loader

安装 npm install sass-loader node-sass css-loader style-loader --save-dev

以上是把css文件内嵌到js bundle中，而不会单独放到一个css文件中。

可以使用extract-text-webpack-plugin这个插件，把所有入口中引入的*.css文件，移动到独立分离的css文件。

安装 npm install extract-text-webpack-plugin@next webpack4.x版本

使用的步骤：

第一步：先引入extract-text-webpack-plugin插件

第二步：配置

loader的配置

插件的配置

执行webpack后，生成的目录

3.html-loader html里引用的静态资源，如：img，audio等。

安装：cnpm install html-loader --save-dev

完全禁用：attrs:false

4.url-loader 处理图片和字体文件的loader

安装：cnpm install url-loader --save-dev

url-loader的fallback配置是file-loader，所以需要安装file-loader。

综上使用loader的经典步骤：

1>安装对应的loader

2>配置module的rules选项，每个loader对应一个对象

3>配置主要包括以下内容:

test:一个匹配loaders所处理的文件扩展名的正则表达式

use：使用的loader 数据类型：string|array|object

插件（plugins）
插件(plugins)是用来扩展webpack功能的，它们会在整个构建过程中生效，执行相关的任务。

插件可以完成更多loader不可能完成的功能。

插件分为两种：

1)内置插件

2)第三方插件

html-webpack-plugin 有两个主要作用：
1)为html文件中引入外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题。

2)可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口。

第一步：安装html-webpack-plugin插件

cnpm install html-webpack-plugin --save-dev
第二步：在plugins内配置

注：需要替换title,需要在html内title标签内添加<%= htmlWebpackPlugin.options.title%>,这个配置和html-loader冲突。

生成多个html页面时，需要用filename来区分，引入的js需要使用chunk来配置。

配置多个：写多个即可。

构建本地服务器 webpack-dev-server
第一步：

安装：cnpm install webpack-dev-server --save-dev

第二步：在webpack.config.js中配置

第三步：配置package.json里的scripts字段里

第四步：在命令行里执行

npm run dev
注：执行完后不会生成文件，文件会运行在内存中。

九、开发环境和构建环境的构建配置差异
我们在日常的前端开发工作中，一般都会有两套构建环境：一套开发时使用，构建结果用于本地开发调试，不进行代码压缩，打印debug信息，包含sourcemap文件；另外一套构建后的结果是直接应用于线上的，即代码都是压缩后，运行时不打印debug信息，静态文件不包括sourcemap的。有的时候可能还需要多一套测试环境，在运行时直接请求mock工作。

webpack的运行环境是nodejs，我们依赖通过nodejs提供的机制给要运行的webpack程序传递环境变量，来控制不同环境下的构建行为。

例： 在npm中的scripts字段中添加一个用于生产环境的构建命令。

{
    "scripts":{
        "build":"NODE_ENV=production webpack",
        "dev":"NODE_ENV=development webpack-dev-server"
    }
}

然后可以在webpack.config.js文件中可以通过process.env.NODE_ENV来获取命令传入的环境变量。

注：在这里会报下面的错

**原因是window不支持NODE_ENV=development

解决方案：**

第一步：安装cross-env包 cnpm install --save-dev cross-env

什么是cross-env？

它是运行跨平台设置和使用环境变量的脚本。

第二步：在NODE_ENV=development前面加上cross-env即可，如下

{
    "scripts":{
        "build":"cross-env NODE_ENV=production webpack",
        "dev":"cross-env NODE_ENV=development webpack-dev-server"
    }
}

十、模块热更新
(Hot Module Replacement或HMR)是webpack提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。

引用：const webpack = require(‘webpack’);

配置：

devServer:{ hot:true }, plugins:[ new webpack.HotModuleReplacementPlugin(), new webpack.NameModulesPlugin() ]

vue-loader
https://vue-loader.vuejs.org/zh/guide/#手动设置

npm install -D vue-loader vue-template-compiler vue-style-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}