前端小白，第一次写博文，也算理理自己的理论，有错请指教，各位大佬勿喷蟹蟹٩('ω')و
@[TOC]

一、安装配置webpack

1.webpack的定义

webpack是什么？官方文档的定义：

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

我理解的webpack做的事情是：它先找到你打包开始的入口文件(entry)，然后根据你入口文件中的依赖关系（一大堆的导入导出渲染等），顺藤摸瓜的把所有文件打包到一个出口文件中(output)。

2.webpcak的安装

那么，怎么安装webpack呢？
webpack安装：在命令行输入

npm install webpack webpack-cli -g

=>这里我是用的是全局安装webpack（代码中的-g 即 --globle），之前我在其他项目底下使用局部安装，结果在其他项目目录下要使用webpack频频出错（一直提示我安装webpack-cli），官方文档推荐使用本地安装（指路官方文档），为了方便使用我直接全局安装，如果有谁碰到和我一样的问题（小白笑哭），指路这位大佬的博文-->webpack坑系列--安装webpack-clit，讲的很清楚了蟹蟹

安装好出现这个：

在这里插入图片描述

在这里插入图片描述

3.webpack的配置

webpack的配置都在webpack配置文件中，即我们自己要先在根目录中创建一个配置文件webpack.config.js。

在package.json中配置webpack运行命令

为了运行方便，我们在package.json文件中找到scripts节点，作如下修改：

scripts:{
    "dev":"webpack"
}

这个意思是在命令行用npm run dev命令就可以开始打包了！

入口文件配置(entry)

入口文件就是指你打包开始的主文件，默认值为./src，也可以自己设置入口文件。
就我而言，我打包的入口文件是app.js，因为这是我项目的主文件，也是我所有依赖关系开始的主文件。

webpack.config.js

modules.export = {
    entry:'./app.js'
}

出口文件配置(output)

入口文件都可以配置了，出口文件当然也可以。它在output中配置，默认出口文件为./dist/bundle.js。如若要自己配置，如下：

webpack.config.js

modules.export = {
    entry:'./dist/vue-bundle.js'
}

意思是打包到dist文件夹里的vue-bundle.js文件里。

webpack的模式(mode)

webpack模式有两种，即development和production，两种模式打包出来的文件略微有些差别，后者被压缩得更小。开发阶段推荐使用development，上市阶段再使用production。

指定开发模式，在webpack.config.js文件中添加如下节点：

module.exports = {
    mode:'development'  //意思是用开发模式打包文件
}

二、各种类型文件打包

这里要说一下，webpack打包只能自动打包js文件，其他的非js文件是没法自动打包的，因此，我们需要添加对应文件的loader。实际上，loader起到的作用是：将对应的文件类型转为可处理的有效模块，然后再由webpack进行处理。

1、打包css文件

第一步，安装style-loader css-loader，在命令行这样写：

npm install style-loader css-loader -d

没有出现ERR就说明没有问题。

第二步，在webpack.config.js里面添加如下节点：

module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}

=>这里要解释一下：rules是所有第三方模块的匹配规则，它的值是一个数组，数组的元素是一个对象，每个对象都相应匹配一个第三方模块的规则。注意！！！每个对象都至少包括两个属性，test和use！！！test指要匹配的文件后缀，use指对应的第三方模块loader(就是你刚才安装的的loader啦！)

2、打包处理less

第一步，安装less-loader：

npm install less less-loader -d

第二步就在webpack.config.js中这样写：

module:{
    rules:[
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    ]
}

3、打包处理sass

第一步，安装less-loader：

npm install sass-loader  node-sass -d

第二步就在webpack.config.js中这样写：

module:{
    rules:[
        {test:/\.sass$/,use:['style-loader','css-loader','sass-loader']}
    ]
}

4、打包处理和url路径有关的文件（图片文件等）

第一步，安装url-loader：

npm install url-loader  file-loader -d

第二步就在webpack.config.js中这样写：

module:{
    rules:[
        {
            test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
            use:'url-loader?limit = 16940'
        }
    ]
}

=>注意,这里的limit是用来限制文件大小的。

三、关于工具和插件(plugins)

目前仅用过2个工具或者是插件，后续有用到其他再补充~

1.实现webpack自动打包功能（工具）

为什么要实现自动打包功能？方便。在程序打包完成后，出于一些原因，我们又要对程序进行修改，修改后我们又要重新在命令行运行npm run dev命令来打包项目。好吧，这只是修改一次，如果修改很多次代码呢？继续打包？我就问你烦不烦？
自动的打包的好处就在这里，当你运行一次npm run dev后，后续代码如果有再修改，他会帮你自动打包而不需要你手动打包。那么，怎么实现呢？
第一步，在命令行安装自动打包工具webpack-dev-server：

npm install webpack-dev-server

第二步，修改package.json -> scripts节点的dev 如下：

"scripts":{
    "dev" : "webpack-dev-server"
}

第三步，命令行运行命令npm run dev即可。

2.实现打包完成即时生成预览页面（插件）

这个插件能实现在打包完成的一瞬间即时生成预览页面。

第一步，在命令行运行如下命令，安装自动生成预览页面插件html-webpack-plugin：

npm install html-webpack-plugin

第二步，在webpack.config.js文件中添加如下配置信息：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlPlugin = new HtmlWebpackPlugin({ //获取插件实例对象
    template:'./src/index.html', //要自动打开的文件路径
    filename:'index.html' //生成的文件名称，该文件存在于内存中，其实是看不到的
});

第三步，添加插件节点信息：

modules.export = {
    plugins:[HtmlPlugin] //plugins属性值为一个数组，包含了打包过程中会用到的插件
}

第四步，这一步主要是配置一些打包的其他信息。打开package.json文件，在其中找到scripts结点，作如下改动：

//--open 打包完成后自动打开浏览器页面
//--host 配置IP地址
//--port 配置端口
"scripts":{
    "dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

然后就可以啦！

目前先写到这里，如果还有其他后续再补充，谢谢看到这里的小伙伴啦！