webpack

一、基本流程

一，webpack简介

1.核心

entry

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。

output

告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。

filename 用于输出文件的文件名。

目标输出目录** path **的绝对路径。

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

use 属性，表示进行转换时，应该使用哪个 loader。

plugins

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。

模式(mode)

告知 webpack 使用相应模式的内置优化。

mode: development

mode: production

2.优势

① 模块化开发（import，require）

② 预处理（Less，Sass，ES6，TypeScript……）

③ 主流框架脚手架支持（Vue，React，Angular）

④ 庞大的社区（资源丰富，降低学习成本）

二、准备工作

1.安装node.js

2.创建项目

①创建项目目录

新创建的项目文件夹webpackDemo，创建两个基础文件夹：src和**dist，**src放置源代码，dist放置webpack打包后输出的代码，最终我们上传服务器的代码都是从dist文件夹下获取。

②新建package.json文件

package.json文件是在node.js环境下开发项目必须要使用到的文件，该文件主要用于配置项目入口、脚本和项目所需安装的依赖等等。可以自己手动创建，也可以通过命令行自动创建它。命令行创建很简单，直接在控制台终端输入npm init -y，然后一直回车即可轻松创建一个最基础的package.json文件。

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

##3.安装webpack

依次输入npm i -D webpack和npm i -D webpack-cli回车本地安装，i—>install，-D—>--save-dev

##4.新建webpack.config.js文件

module.exports = {
    entry: './src/scripts/index.js',    // 需要被打包的js文件路径及文件名
    output: {
        path: __dirname + '/dist',    // 打包输出的目标文件的绝对路径（其中__dirname为当前目录的绝对路径）
        filename: 'scripts/index.js'   // 打包输出的js文件名及相对于dist目录所在路径
    }
};

#三、开始打包
##1. 新建需要被打包的js文件

随便写点js

//index.js
alert('Hello Webpack!');

##2. 开始打包
输入命令行：npx webpack，回车。

####打包方式
①在命令行输入npx webpack
②在package.json中写**“start”: “webpack”，可在命令行直接输入npm start**
③我们只需在webpack.config.js中添加watch: true就好。（自动化打包）
小贴士: 当我们配置watch为true进行打包后，Webpack会一直处于监听状态，然而当更改webpack.config.js后我们仍需要重新进行打包操作，这时我们只需在控制台简单的按下Ctrl+C后根据提示输入字母y回车确定即可成功退出监听状态。

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"   
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14"
  }
}

由于我们已经在webpack.config.js文件配置了打包的相关路径及文件名，所以最终打包后我们就可以在dist目录下看到我们想要的输出结果，打包后整体目录结构如下：

##3. 使用打包后的js代码
在dist目录下手动创建一个index.html文件，并引入这个已经打包成功的index.js文件。
浏览器打开，弹出“Hello Webpack!”提示框，说明代码确实已经打包成功。

---

二、css打包
#一、JS模块化
我们在scripts目录下添加一个module.js文件，目录结构如下：

写以下代码

// module.js
var text = 'Hello Webpack!';

module.exports = {   // CommonJS规范中模块输出语法
    text: text
};

然后在index.js中引入module.js文件

// index.js
var module = require('./module.js');   // CommonJS规范中模块引入语法

alert(module.text);   // 打包后同样输出“Hello Webpack!”

#二、打包CSS样式
###1. loader
专门用于处理除JS文件之外的其他格式文件的编译、提取、合并、打包等工作的。

CSS文件的打包需要用到css-loader和style-loader两个loader，css-loader只是用于加载css文件（并没有添加到页面），而style-loader则是将打包后的css代码以

// webpack.config.js
module.exports = {
    entry: './src/scripts/index.js',   // 打包入口
    output: {   
        path: __dirname + '/dist',   // 输出路径
        filename: 'scripts/index.js'    //  输出文件名
    },
    module: {
        rules: [  
            {
                test: /\.css$/,   // 正则表达式，表示.css后缀的文件
                use: ['style-loader','css-loader']   // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
            }
        ]
    }
};

###3.开始打包
在css目录下新建一个style.css文件，并写入样式：

/* style.css */
html{ background: #f00;}

然后在index.js中引入该文件：

// index.js
var module = require('./module.js');
require('../css/style.css');   // 引入css样式

alert(module.text);

最后输入命令npm start, 打开index.html页面后，你会发现除了弹出之前的“Hello Webpack!”外，页面背景颜色也变为红色,说明样式也已经打包成功。

---

三、图片打包
##1. CSS中的图片
在style.css中添加以下代码

html{ height: 100%; background: url("../images/1.jpg") no-repeat center;}

#####① 输入命令安装file-loader

npm i -D file-loader

#####② 在webpack.config.js中的rules数组中添加file-loader的相关配置

{
    test: /\.(png|jpg|gif|svg)$/,
    use: ['file-loader']
}

对于只有单个loader的，我们通常这样写：

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader'
}

然后npm start

打包后如何保持图片名不变，而且能够添加到指定目录下呢
添加一个options属性即可: name属性其实就是图片打包后的路径，其中包括图片名（[name]）和图片格式（[ext]）。

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
        name: 'images/[name].[ext]'
    }
}

注意：url-loader
除了使用file-loader对图片进行打包处理外，我们同样也可以使用url-loader代替，而且我们可以对小于某个大小的图片进行base64格式的转化处理。
limit属性的作用就是将小于8192B（8.192K）大小的图片转成base64格式，而大于这个大小的图片将会以file-loader的方式进行打包处理
如果不写limit属性，那么url-loader就会默认将所有图片转成base64

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'url-loader',
    options: {
        name: './images/[name].[ext]',
        limit: 8192
    }
}

##2.JS中的图片
先将图片资源加载进来，然后再将其作为图片路径添加至图片对象。

// index.js
var imgSrc = require('../images/1.jpg');

var img = new Image();
img.src = imgSrc;
document.body.appendChild(img);

四、HTML打包
Webpack打包，将各种页面所需要的资源从src目录打包至dist目录，但是我们在最后必须在dist目录中手动去创建HTML页面，并引入这些打包后的资源。
事实上，Webpack能够自动的帮助我们完成这件事，只需要使用html-webpack-plugin插件即可。
####1、安装html-webpack-plugin插件

npm i -D html-webpack-plugin

####2. webpack.config.js中添加相关配置

const htmlWebpackPlugin = require('html-webpack-plugin');   //  引入html-webpack-plugin插件

module.exports = {
    entry: './src/scripts/index.js',   // 打包入口
    output: {
        path: __dirname + '/dist',    // 输出路径
        filename: 'scripts/index.js'     // 输出文件名
    },
    module: {
        rules: [    // 其中包含各种loader的使用规则
            {
                test: /\.css$/,  // 正则表达式，表示打包.css后缀的文件
                use: ['style-loader','css-loader']   // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
            },
            {   // 图片打包
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'url-loader',
                options: {
                    name: './images/[name].[ext]',
                    limit: 8192
                }
            }
        ]
    },
    plugins: [   // 打包需要的各种插件
        new htmlWebpackPlugin({   // 打包HTML
            template: './src/index.html'   //  HTML模板路径
        })
    ],
    watch: true   // 监听文件改动并自动打包
};

####3. 手动在src目录下添加HTML模板文件

HTML模板文件如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello Webpack</title>
</head>
<body>
</body>
</html>

除了HTML本身，其他资源如CSS、图片等均无需手动添加，在打包结束后，所有资源均会自动添加至HTML文件相应位置并进入dist目录。
####4. 打包结束

打包后的index.html文件如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello Webpack</title>
</head>
<body>
<script type="text/javascript" src="scripts/index.js"></script></body>
</html>

五、自动刷新
类似于css打包中：在webpack.config.js中添加 watch: true 配置，我们可以直接给package.json中的scripts添加相关配置，而无需更改webpack.config.js。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch"
}

换句话说，package.json中的webpack --watch与webpack.config.js中的watch: true效果相同。

webpack实现自动打包，还具有自动打开浏览器和自动刷新页面的功能:webpack-dev-server
####1. 安装webpack-dev-server

npm i -D webpack-dev-server

####2. package.json中的scripts添加相关配置

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open",
    "bulid":"webpack"
  }

其中--open 就代表打开默认浏览器。
####3. 输入命令行进行打包

npm start

####4. 更改任意代码
更改任意代码保存后你会发现浏览器自动刷新

注意：Webpack有两种打包模式：开发模式和生产模式，开发模式下可使用 webpack-dev-server 提高开发效率。
通过webpack-dev-server打包后的代码并不会进入dist目录，而是直接创建一个开发服务器，并运行打包后的代码。

---

###webpack两种打包模式：
####①production 生产模式 打包出的 js 代码自动压缩
####②development 开发模式

我们可以修改下package.json文件里面的 scripts 属性：
“dev”: “webpack --mode development”,
"build: “webpack --mode production”
最后我们就可以使用 npm run dev 进行开发模式打包，使用 npm run build 进行生产模式打包。