webpack打包工具基础配置

一、新建项目，并且初始化

1.初始化项目

输入命令 npm init -y

2.安装

安装 webpack
输入命令 ： npm i webpack webpack-cli -D

3.先打包出口文件

打包 npx webpack 入口文件
例： npx webpack index.js
这样就默认生成 dist文件夹 里面生成main.js

入口文件一般就是其他的js文件导入到的文件 webpack 会自动分析入口文件里面的引用关系
以上是简单打包

webpack可以用来打包.js文件（多个合成一个）可以处理es6的模块化和nodejs中的模块化。

二、配置文件（由浅到深进行配置）

1.调整模式

wepback.config.js的文件（如果找不到，则它会用一些默认设置）。这个文件就是webpack的配置文件，在这个配置文件中，我们可以方便地指定一些参数，让打包更加灵活。

在基本根目录下创建一个名为webpack.config.js
内容：

 module.exports = {
    mode: "development"
}

webpack给mode 提供了两个模式:

development :开发模式(代码不会压缩 混淆)

production:生产模式

2.配置指定文件

上述是wepback工作时会默认指定wepback.config.js文件

指定配置文件

在基本根目录下创建一个名为webpack.dev.js

module.exports = {
    mode: 'development',
    output: {
        filename: 'bundle.js' // 设置出口文件的名字 默认情况下main.js
    }
}

在html中引入 bundle.js
这样打包的时候 指令就是格式：
npx webpack --config webpack的配置文件 入口文件
npx webpack --config webpack.dev.js index.js
此时打包之后的js文件就叫 bundle.js

3.简化打包命令

在package.json中添加script命令

"scripts": {
      "自定义命令名": "要具体执行的代码",
    + "mydev": "webpack  --config webpack.dev.js index.js"
  },

然后就可 直接输入命令 npm run mydev 运行打包

4.设置文件入口出口

在webpack中：
默认入口是：./src/index.js
默认出口是：./dist/main.js。

也就是说，如果直接在根目录下运行webpack，它会直接去找.src下的index.js，并把打包之后的代码放在dist/main.js下。

4.1.自定义入口文件

如果入口文件不是index.js 在在webpack.config.js的配置项中添加 entry项

module.exports = {
  mode: 'development', // 打包方式
  entry:'./src/js/main.js' // 入口文件
}

4.2.自定义出口文件

先引入path模块
const path = require(‘path’)

在webpackage.js中设置output项。

output: {
        "path": path.join(__dirname,'/build'), // 决定出口文件在哪里
        "filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
    }

output中的path用来指定打包后的路径。注意：它必须是绝对路径
如果path中的路径不存在，它会自动创建。

然后就可以运行打包了

5.处理css文件

目标 要在js中引入css文件
先把css文件导入入口文件 我这里是main.js
安装并使用css-loader
npm i css-loader -D
修改webpack.config.js文件，添加modules

 module:{ // 处理非js模块
    rules:[ // 规则
      {
        test: /\.css$/, 		// 正则测试 如果是.css结尾的文件进行处理
        use: ['css-loader'] 	// loader 如果正则匹配成功 使用指定loader
      }
    ]
  }

css-loader只是能让你在.js中通过import来引入.css，如果你希望引入的css代码最终以style标签的方式插入到html页面中，则还需要安装一个loader:style-loader
安装并使用style-loader
npm i style-loader -D
再配置 只要在之前的loader 再加 style-loader
use: [‘style-loader’,‘css-loader’]
有多个loader的情况下，use数组中的loader执行顺序是从右到左的过程
然后运行打包

6.处理less文件

目标 要在js中引入less文件
先把less文件导入入口文件 我这里是main.js
安装 npm i less-loader less -D
在 rules里面配置 less的

{
                test: /\.less$/,     // 正则匹配，以.less结尾的文件
                // 如果发现是.less文件，则由如下三个loader来处理
                // 处理的顺序是   从右向左
                // less-loader: 作用是加载less文件，会帮你less转成css
                // css-loader: 作用是允许.js中引入.css
                // style-loader:作用是在.html上创建style标签，把css代码输入进去
                
                use: ['style-loader','css-loader','less-loader'] // 匹配成功，使用指定的loader
        }

然后运行打包

7.处理文件中图片

当css中加入图片时
安装url-loader
npm i url-loader -D
配置

module:{ // 
    rules:[
        // ...
        {
                test:/\.(png|svg)$/,// 正则匹配，以.png结尾的文件, 以.svg结尾的文件
                use:['url-loader'] // 匹配成功，使用指定的loader
            }
    ]
}

然后 运行打包
好处：减少一次网络请求

坏处：增加了文件的大小

7.1.问题

在实操的过程，会把一个较小的图片文件转base64,这样虽然会增加打包文件的大小，但可以减少一次网络请求，划算！

但是，如是一个文件特别大，就不适合去转base64:它会急剧增长打包文件的大小 。

7.2.解决：

设置文件阈值

{
    test:/\.(png|svg)$/,
    use:[
        {
            loader:'url-loader',
            options:{
                limit: 3 * 1024 // 限制大小为3k
            }
        }
    ]
}

但是会出现大图片没办法显示
安装 npm i file-loader -D
运行 打包
如果图片小于指定limit，则编译成base64码；

如果图片大于指定limit，则以指定的名字，放在指定的文件夹下。

8.降级操作

能够把es6高级内容变为es5的loader名称为 babel-loader
安装
npm i babel-loader @babel/core @babel/preset-env -D
配置

{
    test: /\.js$/,
        exclude: /node_modules/,  // 排除目录
        use: [
                {
                    loader:'babel-loader',
                 	options: {
                        presets: ['@babel/preset-env']
                    }
                }
        ]  // es6转es5
}
@babel/preset-env用来指定按什么样的预设来进行降级处理

运行 打包

三、插件部分

1. mini-css-extract-plugin

功能：这个插件帮助我们把css代码提取到一个独立的文件中（而不是以style的方式嵌在html文件中）。
安装 npm install mini-css-extract-plugin -D

webpack.config.js引入

 const MiniCssExtractPlugin = require('mini-css-extract-plugin')

替换style-loader

use: [{loader: MiniCssExtractPlugin.loader}, 'css-loader', 'less-loader']

加

plugins: [
        new MiniCssExtractPlugin({
            // [name], [hash] 是占位符
            // name: 表示入口文件的名称
            // hash: 一串随机值，是用于区别于本次打包与其它打包的过程。由于源文件有变化，则每次打包时hash都不同
            filename: '[name]-[hash].css',
          })
    ]

运行 打包

2.html-webpack-plugin

功能：把我们自已写的.html文件复制到指定打包出口目录下，并引入相关的资源代码。
在webpack.config.js 引入插件

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

再添加一个pluging设置

new HtmlWebpackPlugin({ // 打包输出HTML
            minify: { // 压缩HTML文件
              removeComments: true, // 移除HTML中的注释
              collapseWhitespace: true, // 删除空白符与换行符
              minifyCSS: true// 压缩内联css
            },
            filename: 'index.html',
            template: path.resolve('./index.html') // 指定模块的位置
 })

运行 打包
它会把template中指定的.html文件复制（压缩）到出口文件夹
还会自动附上打包之后.css和 .js代码

3. clean-webpack-plugin

在生成打包文件之前，把目录清空掉。
安装
npm i clean-webpack-plugin -D
引入

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

再添加一个pluging设置

new CleanWebpackPlugin()

运行 打包

4. 实时打包

安装
npm i webpack-dev-server -D

在webpack.config.js中做如下配置

module.exports = {
    // 配置 webpack-dev-server的选项
    devServer: {
        host: '127.0.0.1',  // 配置启动ip地址
        port: 10088,  // 配置端口
        open: true  // 配置是否自动打开浏览器
    }
    // 其它配置
}

简化命令
在package.json中补充一个script

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

然后 npm run dev 实现实时打包
会直接弹出页面 此时再改代码 浏览器页面会直接刷新
但是浏览器看到的实时效果是服务器通过“内存”提供的，没有物理文件，也不会生成dist目录 要想生效还需要打包

5.处理vue文件

配置webpack，让它能够处理vue单文件组件
有vue文件的前提下

import '../css/index.less'

import Vue from "vue"
import App from '../vuecomponents/app.vue'
new Vue({
  render(h) {
    return h(App)
  },
}).$mount("#app")

安装依赖
安装vuejs

npm i vue -S
安装loader依赖

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

配置webpack
引入
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
配置规则

{
                // 如果是.vue文件，使用如下的loader
                test: /\.vue$/,
                loader: 'vue-loader'
}

添加plugins
new VueLoaderPlugin()
重新打包

小结：

以上步骤一环套一环，目的是将打包配置由简单到复杂一步一步升级体验，当使用vue搭建项目时就不需要这些配置。