webpack note2（手动打包&简便打包&配置走个流程）

webpack手动命令打包

1、创建一个js文件，ES6模块化导出。
demo1.js：

2、再创建一个js文件，解构出上面文件导出的内容。
demo2.js：

3、如果现在我把demo2.js直接引入到html文件里面，情况是报错。为什么，因为是ES6语法，浏览器不能直接识别。那该怎么办呢，可以用webpack工具来配置。

4、我是全局安装webpack：npm install -g webpack-cli webpack，然后通过命令webpack --mode development 要打包的文件 -o 输出文件名指定输出模式为开发模式，将demo2.js文件用webpack来打包，输出到新的文件命名为outdemo2.js，然后引入html文件里。

5、然后就能在浏览器里查看执行结果了。

6、注意：如果在打包的时候没有指定mode，其实会有一串警告，而且在编译时会默认把代码压缩，因为默认是 production生产模式。

警告说你现在有两种模式，一种叫做production （默认生产环境），还有一种叫development （开发环境），而你没有指定任何一个。

mode是webpack4新增的一个选项，必须在生产环境production （自动压缩你的代码）和开发环境development （开发模式不会压缩你的代码）之中选择一个，不然就有警告。

webpack简便方式打包

上面的打包方法麻不麻烦，如果要自动打包要怎么办。看下面。

有个简便方式，不过对文件夹和文件有所要求，入口起点必须使用默认的./src和index.js。然后控制台 webpack --mode production 即可打包，且自动把打包好的文件默认生成到./dist文件夹下的main.js中。

webpack配置流程

Webpack的配置文件叫 webpack.config.js，配置完成后，可以直接在控制台输入webpack 进行打包。

（一）配置文件入口、出口、打包模式

1、配置单个文件

与简便方式打包不同，在配置文件里，这个入口出口地址可以自定义。

module.exports={
	entry:"./src/index.js",//入口
	output:{ //出口
		path:__dirname+"/dist",//文件夹
		filename:"outindex.js"//生成的文件名
	}
}

把上面demo1.js后台demo2.js移入到./src下，然后重命名demo2.js为index.js。

结合上面的配置文件，在cmd中运行webpack 查看结果：

打包成功了，引入html文件里面也能运行，但我忘记指定模式了。

2、配置打包模式

webpack提供了production、development 两种打包模式。但 如果在每次打包的时候都要指定打包模式，很麻烦。其实可以在配置文件里面配置好打包模式。

只要在与entry、output同级处配置mode即可。

mode:"development"//开发模式指定为开发模式 

3、配置多个文件

module.exports = {
    // 将entry 设置成为一个对象，以键值对的形式设置多个入口起点
    entry: {
        index: "./src/index.js",
        indexa: "./src/indexa.js"
    },
    output: {
        path: __dirname + "/dist",
        filename: "out[name].js"//[name] 代表的就是入口文件的key
    },
    mode: "development"
}

在.html中引入一下刚生成的文件：

然后能得到结果：

总之一句话，单入口—单出口；多入口—多出口。

（二）plugin插件

plugin，用于扩展webpack的功能。各种各样的plugin几乎可以让webpack做任何与构建相关的事情。

plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。

下面介绍两个常用的插件：clean-webpack-plugin、html-webpack-plugin。

1、clean-webpack-plugin

该插件可以实现在打包时，清空原有的内容。

使用的场景是：打包时若修改入口起点的键名，会发现打包之后，之前的打包的文件也在。比如我将上面文件入口的两个文件改一下名字，改成indexx和indexxaa，我们看一下啥情况：发现之前的文件也还在，但我只想要最新生成的文件，岂不是还要手动删除！

其实是有解决办法的。如果想在打包的之后清空之前的内容，可以使用clean-webpack-plugin这个插件。

（1）下载

cnpm install clean-webpack-plugin -D
/*
这里注意一个事儿：
与项目无关的插件用 -D（--save--dev）添加到 package.json的 devDependencies ；
有依赖关系的用-S（--save） 添加到 dependencies
*/

（2）引入

const  {CleanWebpackPlugin}  = require("clean-webpack-plugin");

（3）使用

//plugins是一个数组 数组的每一项就是你使用的插件
plugins: [
    new CleanWebpackPlugin()
]

（4）测试一下
我再次修改两个入口文件的键名key为indexxxxx、indexxaaxxxx，然后webpack运行一下。

1、html-webpack-plugin

该插件的主要作用：自动添加打包成功的内容到指定.html中。

（1）下载

 由于 html-webpack-plugin:插件需要依赖 webpack webpack-cli，所以得把这两个依赖也下载。
  cnpm install webpack webpack-cli -D
  cnpm install html-webpack-plugin -D

  或者直接一句话：
  cnpm install --save--dev webpack webpack-cli html-webpack-plugin
  
（注意：即便是全局安装了webpack webpack-cli，在该项目中还是再次要安装到devDependencies中）

（2）引用

const HtmlWebpackPlugin = require("html-webpack-plugin");

（3）使用

plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
        template: "./index.html",  // 指定模板地址，即要将内容注入的目标文件
        hash: true,   //为引入的地址增加后缀，用于清除缓存
        filename: "home.html",   // 将打包后新生成的.html文件名重置，默认是index.html
        title: "我在学习webpack",  //向编译好的页面中添加浏览器标题内容
		minify:{
		    removeComments:true,  //去除注释
		    // collapseWhitespace:true  //压缩代码
		}
    })
]

（4）测试一下

写好模板.html文件，把title引入进来：

打包后，新生成home.html文件，看目录：

然后看看我们将打包的资源引入模板html后新生成的home.html的内容：（原模板文件是没有变化的）

（5）相关配置介绍：

设置页面标签：如果在配置中设置了title，那么必须在对应的 template 模版文件中添加，才能让title生效：
<title><%= htmlWebpackPlugin.options.title%></title>

取消注释：如果template模版中有注释，那么打包的内容也会有注释 。在生产环境中不需要注释，那么就可以设置minify来配置。

关于更多插件的内容，若有兴趣研究请看官网plugin：https://www.webpackjs.com/plugins/

（三）webpack-dev-server

搭建一个开发中的服务器。（不是插件）

安装：npm install -g webpack-dev-server 。

运行命令：webpack-dev-server，然后在浏览器运行：localhost:8080 ，就能看见模版的内容。

注意：在webpack配置文件中添加devServer相关配置，会发现dist这个文件夹里面的资源不再生成；而且如果先把dist文件删除，再启动服务，会发现不会再生成dist文件夹了 。为什么会这样？因为这个开发中的服务器把生成的内容保存在缓存中了。

配置1：在webpack.config.js中配置

devServer:{
	open:true,//在浏览器中自动打开
	port:"8081",//设置端口
	host:"127.0.0.1"//访问地址
}

配置2：在package.json中配置

如果觉得 webpack-dev-server 麻烦的话，可以在package.json中配置，然后npm run start启动

然后还得注意一个问题，有的时候使用webpack-dev-server来执行的时候，打开的页面并不是我们想要的home.html而是一个目录的形式，因为我们使用的是最新版本的，它会自动去寻找一个叫index.html的文件自动打开。但我们刚刚使用HtmlWebpackPlugin这个插件把主页面名改成了home.html，所以webpack-dev-server这个服务找不到了，那么接下来我们把主文件名改回默认的index.html，然后用服务打开，就可以啦。

可以参考下官网：开发中 Server(devServer)

（四）Loaders加载器/打包器

加载器/打包器/翻译器，可以将不同的文件类型（如typescript，css、scss、图片以及对老版本/新版本的JavaScript）转成浏览器能够识别的内容，方便我们使用。

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

下面主要介绍三大种常见的loader。

1、style-loader与css-loader

webpack可以把以指定入口的一系列相互依赖的模块打包成一个文件，这里的模块指的不只是js，也可以是css。

style-loader用来引入css，css-loader用来动态创建style标签，塞到head标签里。所以，要一起下载这辆个依赖。

安装：npm install style-loader css-loader -D

使用：

新建一个assets的静态资源文件夹 → 创建一个style.css文件用来编写样式

在js入口文件引用样式：我们在index.js中引入吧

import "../assets/style.css"

在webpack.config.js中配置：

module: {
    rules: [
        {
            test: /\.css$/,  //正则匹配css文件            
            loader: ["style-loader", "css-loader"] //引用顺序不能变，先加载css，再插入到style中
        }
    ]
}

在模板html中写入一个h1标签，打包后，打开最终的home.html文件：OK渲染成功。

2、Less-loader/sass-loader

（1）Less

需要安装相关依赖：cnpm install less-loader less -D

在assets文件夹中创建less文件，并且在入口js引用：

@yellow:yellow;
body{
	background-color: @yellow;
}

import "../assets/style.less"

在webpack.config.js中配置less：

module:{
	rules:[
		{
			test: /\.less$/,		
			loader:["style-loader","css-loader","less-loader"] // 引用顺序不能变
		}
	]
}

（2）Sass

安装依赖：cnpm install sass-loader node-sass -D

在assets文件夹中创建style.scss文件，并且在入口js引用：

$yellow:yellow;
body{
	background-color: $yellow;
}

import "../assets/style.scss"

在webpack.config.js中配置sass，在rules中添加：

{
	test: /.\.scss$/,
	loader:["style-loader","css-loader","sass-loader"] // 引用顺序不能变
}

3、babel-loader（非常重要）

ES6 语法在开发中已经非常普及，甚至也有许多开发人员用上了 ES7 或 ES8 语法。然而，浏览器对这些高级语法的支持性并不是非常好。因此为了让我们的新语法能在浏览器中都能顺利运行，Babel 应运而生。

babel-loader：就是把es6 es7等这些语法转换成普通浏览器可以识别的javascript代码。

下载：官方提供了两种一个版本是8 版本7 ，我们使用最新的8
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

使用：

在webpack.config.js中添加

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/, //设置哪些文件不处理
      //use设置需要什么loader
      use: { 
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'] // 转换规则
        }
      }
    }
  ]
}

官方babel-loader：https://www.webpackjs.com/loaders/babel-loader/

可以自己尝试编写一个es6的内容，打包，用低版本ie测试是否可以正常运行。

4、Vue Loader

注意：Vue Loader 是一个Webpack的 loader，它支持.vue单文件组件的各个<template>、<script> 和 <style>打包成浏览器可以识别的内容。

官网Loader：https://www.webpackjs.com/loaders

拓展—Webpack常见概念

1、webpack的基本能力：处理依赖、模块化、打包

1. 依赖管理：方便引用第三方模块，让模块更容易复用，避免全局注入导致的冲突，避免重复加载或者加载不必要的模块。
2. 合并代码：把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数，可以减少、优化代码的体积。
3. 各种插件：babel把ES6+转化为ES5-，eslint可以检查编译时的各种错误。

2、Webpack打包原理

webpack是把项目当作一个整体，通过给定的一个主文件，从这个主文件开始找到你项目当中的所有依赖的文件，使用loaders来处理它们，最后打包成一个或多个浏览器可识别的js文件。

3、webpack工作过程

1、解析配置参数，合并从(npm install 类似的命令)和webpack.config.js文件的配置信息，输出最终的配置信息；
2、注册配置中的插件，做出对应的反应；
3、解析配置文件中的entry入口文件，并找出每个文件依赖的文件，递归下去；
4、在递归每个文件的过程中，根据文件类型和配置文件中的loader找出对应的loader对文件进行转换；
5、递归结束后得到每个文件最终的结果，根据output配置生成代码；

---

总结

介绍了webpack手动的、自动的打包方法，然后在配置文件中实现自动化。其中注意四个核心概念 entry、output、loader、plugin，在使用的时候记得看官方文档。

参考博客：
webpack：https://www.jianshu.com/p/105123c1afbd
webpack-基础：https://www.jianshu.com/p/7b269991d07e

我的第一个webpack配置

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: {
        index: "./src/index.js",
        indexa: "./src/indexa.js"
    },
    output: {
        path: __dirname + "/dist",
        filename: "out[name].js"
    },
    mode: "development",
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./index.html",
            hash: true,
            filename: "home.html",
            title: "我在学习webpack",
            minify: {
                removeComments: true,  //去除注释
                // collapseWhitespace:true  //压缩代码
            }
        })
    ],
    // devServer:{
    //     open:true,//在浏览器中自动打开
    // },
    module: {
        rules: [
            {
                test: /\.css$/,//正则匹配css文件
                loader: ["style-loader", "css-loader"]
            }
        ]
    }
}