了解webpack核心与基本使用(超详细配置图文)

最新推荐文章于 2022-07-06 19:22:43 发布

J.P_P

最新推荐文章于 2022-07-06 19:22:43 发布

阅读量276

点赞数 1

分类专栏：工程化文章标签： webpack 前端

本文链接：https://blog.csdn.net/pentoncos/article/details/105306113

版权

工程化专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是webpack?

webpack是主流打包工具中的一种。

我们在vue和react中会写很多组件，很多样式，很多图片等等，当我们执行npm run build之后，先不管按需加载的模块，你会发现打包完的js文件就那么两三个。这就是因为我们时候用了webpack打包工具。

我们来官网上的这张图：
在这里插入图片描述
左边部分有很多小箭头，这就是代表了文件的引入关系。这是由我们在文件里使用的import和export来决定的。所以不管是在vue还是在react中都会有index.js和main.js两个文件，我们的入口文件都是这个，然后根据文件的引用关系进行打包压缩

一句话：webpack是按照文件的引用关系，对文件进行合并打包的工具。

webpack官方地址：https://www.webpackjs.com

基本使用

下载安装

全局安装（不推荐）
```
npm install webpack -g
```
项目安装（局部安装）
```
npm install  webpack --save-dev
```

mode配置

在package.json写里运行指令：

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

然后在终端调用这个dev的指令，npm run dev后，终端会报一个黄色的警告：

WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.

这句话就是告诉我们少了一个mode的配置项，那我们就加上这个配置项：

production 线上模式会进行代码压缩
development 开发模式不会做代码压缩

"scripts": {
    "dev":"webpack --mode=development"
},

重新执行指令，发现之前的黄色警告不见了，工作区多了一个dist线上目录，并且报了一个错误：没有入口文件

ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in ‘C:\Users\xxxx\Desktop\test’

这时我们就在根目录下创建src目录，并创建一个文件
在这里插入图片描述
再执行一遍指令npm run dev，我们发现在dist目录下产生了一个main.js的文件，

当我们运行webpack指令的时候：

默认的入口文件是：./src/index.js
默认的出口文件： ./dist/main.js

当我们需要自己指定出入口路径时，可以这么写：

"scripts": {
    "dev_dir":"webpack --mode=production ./src/hehe.js -o ./output/main.js"
},

同样我们也能得到压缩后的文件
在这里插入图片描述

配置文件 webpack.config.js

上面说了这么多，其实我们在实际过程中是不会这么操作的！(dog)

webpack 是需要传入一个配置对象(configuration object)。取决于你如何使用 webpack，可以通过两种方式之一：终端或 Node.js。

vue里有一个vue.config.js，webpack里有一个全局配置文件叫：webpack.config.js。
默认要求该文件和package.json同级，运行webpack指令的时候默认会在运行路径找该文件。

我们首先更改执行指令，并创建一个webpack.config.js

"scripts": {
    "start":"webpack"
},

在这里插入图片描述
webpack.config.js文件分为四个部分：入口(entry)、出口(output)、加载器(loader)、插件(plugins)

详见：webpack中文文档

单入口单出口

利用webpack.config.js，做一个单入口和单出口的配置：

const path =require('path')
function resolve(dir){
  return path.join(__dirname,dir)
}
// 单入口单出口 只有一个入口文件 只有一个出口文件
module.exports={
  mode:'development',
  entry:'./src/hehe.js', // 指明入口文件
  output:{ //出口相关的设置
    path:resolve('./output'),  //出口的文件夹
    filename:'xixi.js'  // 出口的文件名
  }
}

在这里插入图片描述

多入口多出口

利用webpack.config.js，做一个多入口多出口的配置：

const path = require('path')
module.exports={
  mode:"development",
  entry:{
    wy:'./src/xixi.js',
    wr:"./src/hehe.js"
  },
  output:{
    path:path.join(__dirname,"./dist"),
    filename:'[name]_[hash].js'
    // name 代表的是入口的key值
    // hash 唯一不重复的hash 如果打包文件没有发生改变 hash 不会改变 不会重复打包 
  }
}

在这里插入图片描述

加载器

正常情况下import只能引入js模块，但是很多时候需要用import导入其他文件比如 css ，png ,在这种情况下无法解析需要 loader加载器，将特殊的文件转化为js模块。

module:{
  rules:[
    {
      test:'正则匹配加载的模块',
      use:[加载器1,加载器2 ...]
    }
  ]
}

举个小例子：在js文件里引入图片；在js文件里引入css

html:

let  img  =document.createElement('img')
import resource  from './11.png'
import  './index.css'
img.src = resource
document.getElementById('test').appendChild(img)

webpack.config.js：

const path = require('path')
module.exports={
  mode:"production",
  entry:"./src/index.js",
  output:{
    path:path.join(__dirname,'./dist'),
    filename:"main.js"
  },
  module: {
    rules:[
      //加载图片
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
              loader: 'url-loader',
              options: {
                  limit: 8192
              }
          }
      ]
      },
      // 加载css 
      {
        test: /\.(css)$/i,
        use: [
          'style-loader',
          'css-loader'
         ]
      },
    ]
  }
}

结果：
在这里插入图片描述

插件

帮助我们简化一些功能性操作，plugins:[插件1，插件2]

举个例子：当我们需要把public里的index.html文件自动移动到dist线上目录时。
在这里插入图片描述
webpack.config.js：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
  mode:"development",
  entry:"./src/index.js",
  output:{
    path:path.join(__dirname,'./dist'),
    filename:"main.js"
  },
  // 配置加载器
  module: {
    rules:[
      // 加载css 
      {
        test: /\.(css)$/i,
        use: [
          'style-loader',
          'css-loader'
         ]
      }
    ]
  },
  plugins:[
     new HtmlWebpackPlugin({
      title: '天气太好',
      filename: 'assets/admin.html', // 要导出的文件名和路径
      template:'./public/index.html' // 按照哪一个模板来生成html
    })
  ]
}

结果：
在这里插入图片描述