webpack学习

写在前头:对于B站上尚硅谷的webpack课程的学习笔记,推荐大家去看。

vscode的使用
  1. 注释 ctrl + /
  2. 安装live-server
  3. 代码格式化,使用alt+shift+f格式化。安装beautify
  4. 设置中打开自动保存

01 webpack简介

  1. 通过link标签引入.less样式文件,但是无法识别,需要将.less转为.css
  2. 使用npm init初始化环境,有可能出现Sorry, name can no longer contain capital letters.的提示,是因为命名不能有大写。
  3. 安装jquery:npm install jquery --save-dev
  4. 此时使用script标签引入.js文件报错,说不能从非模块外引入其他文件,也就是import错误,这就是es6语法,浏览器不认识的原因。所以就需要有一些工具,让浏览器不能识别的语法变成浏览器能够识别的语法。
  5. 因此,前端提供一个概念,构建工具,使用大工具将这些小工具都集合起来,这样只需要知道这个大工具如何使用就行了。而webpack就是这个大工具。
  6. js资源,样式资源,引入图片等资源,都需要用webpack来打包。

这就是入口文件,形成依赖关系树,形成chunk (代码块)。

也就是需要将依赖文件变成chunk,然后将chunk中的比如.less文件,.ts文件变成浏览器能够识别的css和js文件,这个过程叫打包,将打包文件输出,这个过程叫bundle

02 webpack五个核心概念

Entry
入口(Entry)指示webpack以哪个文件为入口起点开始打包,分析构建内部依赖图。
比如说有很多文件,但是以index.js为起点开始打包

Output
输出(Output)指示webpack打包后的资源bundles输出到哪里去,以及如何命名。

Loader
Loader(翻译官)让webpack能够去处理哪些非js文件(webpack只能理解js)

Plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩等等。也就是做其他更多的事情。

也就是说有很多文件,比如说js文件中有es6的语法,有ts文件等等。我们要告诉它一个入口文件,从那个文件开始打包。

遇到less文件,图片文件怎么办呢?使用Loader来处理这些文件。

需要压缩怎么办呢?使用插件来做。

Mode
模式分为
development(开发环境模式):让代码在本地能够进行调试。

production(生产环境模式): 能让代码优化上线运行的环境。

03 webpack初体验

  1. npm init初始化包描述文件.json

  2. npm i webpack@4 webpack-cli@3 -g
    全局安装后面可以作为指令直接调用这两个包

  3. npm i webpack webpack-cli -D
    本地安装一次 -D是–save-dev的缩写

  4. 创建文件夹src,代表项目的源代码

  5. 创建文件夹build,webpack打包处理后输出的目录

  6. 打包需要有一个入口文件,起点文件,所以在src中建立一个index.js,作为入口起点文件。

  7. 书写完基本的index.js后,想要看看能不能正常运行怎么做呢?需要添加运行指令。

运行指令
开发环境: webpack ./src/index.js -o ./build/built.js --mode=development
解释:webpack会以 ./src/index.js 为入口开始打包,打包后输出到 ./build/built.js,整体打包环境是开发环境

遇到的问题:webpack : 无法加载文件 D:\nodejs\node_global\webpack.ps1,因为在此系统上禁止运行脚本。
解决:https://blog.csdn.net/weixin_43190355/article/details/100552569

至此打包成功。

关于安装:这里选择了安装4版本的webpack和3版本的webpack-cli,首先是它们版本匹配,另一个是4版本的webpack打包后会有详细的信息显示,而5里面没有。

打包信息:
在这里插入图片描述

重要信息:
Hash值:每次打包后会生成的唯一id。作用,用来作为文件命名的方式。
Asset:built.js 表示输出的资源
Chunks: main
这里面打包后的文件比打包前的文件大了。

看打包后的built.js代码。这里面有eval函数,表示我们之前的代码。
在这里插入图片描述

生产环境: webpack ./src/index.js -o ./build/built.js --mode=production
在这里插入图片描述
可以看到,对比开发环境,生产环境的js文件被压缩了
运行结果:
在这里插入图片描述

最后,想运行js文件看看,在build中写一个index.html文件,并且引入打包后的js文件,也就是built.js。

右键vscode,live-server,运行,没问题。
在这里插入图片描述

写一个.json文件,并使用es6语法引入。

{
  "name": "jack",
  "age": 18
}

注意这里引入json文件,import data,这个data就是json文件全部,这个名字可以任意取

/*
index.js: webpack入口起点文件
*/

import data from './data.json';

console.log(data);

function add(x, y) {
  return x + y;
}

console.log(add(1, 2));

写完以后,需要再次打包。

这个斜杆/ \ 无所谓,因为现在在windows下开发

命令: webpack .\src\index.js -o .\build\built.js --mode=development
在这里插入图片描述

可以看到,data.json文件也引入进来了。
在这里插入图片描述
在浏览器的Console中查看,可以看到,data也正确打印了。
在这里插入图片描述

最后试试引入样式文件 .css文件

html,body{
  height: 100%;
  background-color: pink;
}
import './index.css'

import data from './data.json';

console.log(data);

function add(x, y) {
  return x + y;
}

console.log(add(1, 2));

执行打包命令:
在这里插入图片描述

发现报错了,到built.js中查看,发现抛出异常的语句。
在这里插入图片描述

结论
1.webpack只能处理js/json资源,不能处理css/img等其他资源。
2. 生产环境和开发环境可以将ES6模块化编译成浏览器能识别的module
3. 生产环境比开发环境的差别,现在看来是生产环境的js压缩了。

下面讲解如何处理打包资源。

04 打包样式资源

书写.css文件和.js文件
css文件

html, body{
  margin: 0;
  padding: 0;
  background-color: pink;
  height: 100%;
}

js文件

// 引入样式资源
import './index.css';

之前已经知道,这样是无法打包的。所以webpack如何做呢?Loader

Loader能帮助webpack识别一些无法识别的模块。

所以这里写一个webpack.config.js文件。

webpack.config.js

在这里插入图片描述
注意事项:

  1. 他是在根目录下的文件,和所有的其他比如说存放代码的src文件夹都是同级的。
  2. 他就是webpack的配置文件。作用就是指示webpack干哪些或(当你运行webpack指令时,会加载里面的配置)。
  3. 所有的构建工具都是基于nodejs平台运行的。所以模块化默认采用commonjs
  4. 需要区分项目和配置的语法。项目src使用的是ES6语法,而配置我们使用的是commonjs

commonjs来写webpack的配置

书写webpack.config.js

  1. entry,作为入口的起点,就是说,打包从哪个文件开始,然后构成依赖关系树,然后继续打包
  2. output,需要指定输出的文件名和输出的路径,注意这里的输出路径要是绝对路径。因此,声明一个resolve变量来保存nodejs中的require方法。其中__dirnamenodejs的变量,代表当前文件的目录的绝对路径。
  3. module,就是loader的配置。
  4. plugins,插件的配置,让webpack更强大。
  5. mode,环境的选择,有生产和开发环境,开发情况下都用开发模式,因为代码可以读得懂,可以看他打包成什么样子,而生产环境就不行了,因为代码被压缩。

完整代码:

//resolve用来拼接绝对路径的方法
const {
  resolve
} = require('path');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',

  // 输出,需要输出的文件名和输出的路径
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径,写绝对路径,需要引入nodejs模块
    //__dirname 是nodejs的变量,代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },

  //loader的配置
  module:{
      rules:[
        //详细的loader配置
      ]
  },

  //plugins的配置
  plugins:[
    //详细的pulgins配置
  ],

  //模式,二选一
  //开发情况下都用开发模式,因为代码可以读得懂,可以看他打包成什么样子,而生产环境就不行了,代码被压缩
  mode: 'development',
  //mode: 'production'
}

大体框架搭建出来了,现在来书写loader

 module: {
    rules: [
      //详细的loader配置
      {
        //1.test使用正则表达式,表示匹配哪些文件
        test: /\.css$/,

        //使用哪些loader
        use: [
          //use数组中loader执行顺序,从右到左,从下到上,依次执行。

          // 3.创建style标签,然后将js中的样式资源插入进去,然后添加到head中生效。
          'style-loader',
          // 2.将css文件变成commonjs模块,加载到js中,里面内容是样式字符串
          'css-loader'

        ]
      }
    ]
  },
  1. 第一个键值对test,表示使用的正则表达式,匹配哪些文件
  2. 第二个use,表示需要使用哪些loader。其中注意顺序是从右到左,从下到上依次执行
  3. 各种loader需要下载。

loader下载:
由于webpack会向上找包,也就是会从当前目录,一直找到你这个项目的根目录,所以,利用这个特性,我们避免重复下载包,所以就干脆,在根目录下载包。

下载过程:

  1. 切换到根目录
  2. 在根目录初始化包描述文件。npm init
  3. 下载webpackwebpack-cli npm install webpack webpack-cli -D
  4. 下载css-loaderstyle-loader npm install css-loader@3 style-loader@1 -D
  5. 切换到项目文件输入webpack 运行指令。

刚刚上面代码是exports,少写了一个s导致报错。现在,打包成功。
在这里插入图片描述

最后,看看样式是否生效,写一个html文件。以后会统一处理html资源的。

在这里插入图片描述
生效:
在这里插入图片描述

效果就是和前面说的一样,在head中添加了style标签。
在这里插入图片描述

最后的最后,梳理一下流程。

  1. 首先是通过entryindex.js引入进来,然后entry会查看内部依赖图,也就是看看你这个js文件import了哪些文件。发现引入了css资源。
  2. 资源通过module中的loader,每一个资源都会进行处理。rules中有testtest是个规则)。首先,js资源来匹配这个正则表达式,发现js的后缀是js形式的,不是test中写的.css格式的,所以js资源不能通过loader,接下来是css资源,发现匹配上了,就使用下面两个loader进行处理。
  3. 由于loader的执行顺序是下往上,右往左,所以先执行css-loader,css-loader将css文件变成commonjs模块加载到js中,里面内容是样式字符串。
  4. 再执行style-loader,创建style标签,将js中的样式资源插入进去,添加到head中生效。
  5. 然后到输出路径由output来执行。
  6. 所以对于webpack来说,处理资源用相应的loader就可以了。

对于less文件的处理:

less:

#title{
  color:#fff;
}

js中引入

import './index.css';
import './index.less';

执行打包,发现报错。

在这里插入图片描述

这就是因为webpack只能识别js资源,不能识别样式资源。而这个资源是less,因此得出结论不同资源需要配置不同的loader。

所以我们需要再写一个loader配置。同时,需要下载less-loaderless注意包在最外层下npm i less-loader@5 less@3 -D

注意这里less需要写三个loader,因为这里需要将less文件编译成css文件。

  module: {
    rules: [
      //详细的loader配置
      {
        //1.test使用正则表达式,表示匹配哪些文件
        test: /\.css$/,

        //使用哪些loader
        use: [
          //use数组中loader执行顺序,从右到左,从下到上,依次执行。

          // 3.创建style标签,然后将js中的样式资源插入进去,然后添加到head中生效。
          'style-loader',
          // 2.将css文件变成commonjs模块,加载到js中,里面内容是样式字符串
          'css-loader'

        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          //将less文件编译成css文件
          //需要下载less-loader 和less
          'less-loader'
        ]
      }
    ]
  },

包下载好以后,执行webpack

没有问题:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
一样,less文件也是创建了style标签,说明打包成功。

05 打包html资源

webpack.json.js

/*
  loader: 1. 下载 2. 使用(配置loader)。
  plugins:1. 下载 2. 引入 3. 使用
*/

const {
  resolve
} = require('path');

module.exports = {
  entry: './src/index.js',

  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },

  module: {
    rules: [

    ]
  },

  plugins: [

  ],

  mode: 'development'
}

我们使用plugins来打包html资源。

  1. 首先下载 npm i html-webpack-plugin@3 -D
  2. 注意命名,它是一个类或者说是构造函数,所以用大头,引入。
const HtmlWebpackPlugin = require('html-webpack-plugin');
  1. 调用在plugins中 new HtmlWebpackPlugin()

这里不小心安装外部(也就是根目录)的时候,安装了webpack5,所以导致和plugin有不兼容的报错,如果以后用的话可以看这篇文章,为了方便使用,这里先安装回4版本的webpack:

https://blog.csdn.net/vv_bug/article/details/103571985

这个插件做了什么事情呢?我们webpack一下看看

重新安装了webpack4后,成功webpack。
在这里插入图片描述

这里显示,在buid目录下多了一个index.html资源。

而且看到,这里已经引入了built.js

在这里插入图片描述

因此,这个插件的功能

  1. 创建一个空的html文件。
  2. 自动引入打包输出的所有资源(js/css)。

问题来了:我们的需求是要有结构的html文件。因此,可以加入配置选项。

  plugins: [
    new HtmlWebpackPlugin({
      //作用复制下面的html文件, 并会自动引入打包输出的所有资源,注意,是自动。
      template: './src/index.html'
    })
  ],

在这里插入图片描述

再去查看build目录下的index.html,发现,他就引入了我们之前写的html文件中的内容了,这很重要,会大大方便以后的代码书写,我只需要在一个地方写个大概模板,我直接打包出来的html就会包含我所有的模板和我所有需要的js/css等资源!

在这里插入图片描述
成功。

最后总结它做了什么事情:

  1. 这个插件会自己去找我们指定的html文件。
  2. 找到后将内容复制下来,并且将我们需要的资源引入进来;如果是js资源就添加一个script标签引入,如果是样式就添加一个link标签引入进来,总之会自动引入。之后输出出去。
  3. 需要注意的点就是,我们不需要自己引入了,如果自己再引入就会引入两次,会出现问题。
  4. 对比loader,插件不同在于它需要引入进来,其他步骤差不多。

06 打包图片资源

已知的写法:

const {
  resolve
} = require('path');

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

module.exports = {
  entry: './src/index.js',

  output: {
    filename: './built.js',

    path: resolve(__dirname, 'build')
  },

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

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

现在css里面呢是包含图片资源的,让我们webpack看看能不能打包成功。

看到图片报错了。

在这里插入图片描述

那如何做呢?webpack不能识别的资源我们首先想到的是添加loader。

因此需要添加loader:

  module: {
    rules: [{
        test: /\.less$/,
        // 使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理图片资源
        test: /.\(jpg|png|gif)$/,
        //处理一个loader用loader
        loder: 'url-loader',
        options: {
          // 表示图片大小小于8kb,就会被base64处理。
          limit: 8 * 1024
        }
    ]
  },

多个loader使用use,单个loader就直接用loader

base64处理:

  • 优点:减少请求数量(减轻服务器压力)

  • 缺点:图片体积会更大(文件请求速度慢)。

因此,选择base64图片处理通常是对比较小的图片,因为对大图片处理会使得它的大小变得更大。通常是8-12kb以下的图片使用base64处理。

对于loader需要安装的包:

  1. url-loader
    
  2. file-loader
  3. 去最外层的根目录上 npm i url-loader@3 file-loader@5 -D

此时再打包出现一个错误:
在这里插入图片描述
出现错误别着急百度,先看看,上面明确提示了,在rules[1]中有一个未知的属性option,再看他下面的提示,就明白了,原来是options而不是option。

令人舒适的绿色和黄色。
在这里插入图片描述
但是你看:
在这里插入图片描述
为什么只输出了一张图片呢?哦原来是其他两张图片的大小 小于8kb导致了他们变成了base64的字符串了,就直接放在built.js中了。

可以看到,在console中看到的是这样的:
在这里插入图片描述

打开index.js查看,对了。
在这里插入图片描述

除此之外还不够,因为我们除了在css或者less中引入文件以外,我们还会在html中使用img标签来引入图片。

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>

<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <img src="./angular.jpg" alt="angular">
</body>

</html>

我们来webpack看看。

在这里插入图片描述
不报错。

那就真的没有错了吗??

在这里插入图片描述

我们查看生成的index.html文件会发现,他的src居然还是./angular.jpg。那就不对了。因为:
我使用template来将src下的index.html复制到build下的index.html中,文件路径明显改变了,那么图片的引入路径也要改变,可是这里却没有变,所以图片无法引入。
在这里插入图片描述

此时页面:
在这里插入图片描述

因此,这样的话就会出现一个问题,它默认是处理不了html中的图片,因为它无法解析到。那怎么办呢?再加一个loader。

加一个html-loader。下载npm i html-loader@0 -D

这里有个问题,前面我们使用过html-loadr,以为它只是处理html文件的。但是不是这样的,它主要处理的其实是html文件的img图片(负责引入img,从而能被url-loader进行处理)。

module: {
    rules: [{
        test: /\.less$/,
        // 使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        //处理一个loader用loader
        loader: 'url-loader',
        options: {
          // 表示图片大小小于8kb,就会被base64处理。
          limit: 8 * 1024
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
        loader: 'html-loader'
      }
    ]
  },

再次webpack看看,看build下的index.html

在这里插入图片描述
会发现他变成了object Module,这是为啥呢?

**问题:**因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs语法,所以解析时会出问题[object Module]

因为默认情况下url-loader会使用es6的module来处理这个模块,而html-loader引入img的语法是commonjs的语法引入,因此,url-loader以es6的语法来解析会导致无法解析。所以url-loader中需要在options里进行处理。

**解决:**关闭url-loader的es6模块化,使用commonjs解析。
esModule: false

此时module的设置:

 module: {
    rules: [{
        test: /\.less$/,
        // 使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        //处理一个loader用loader
        loader: 'url-loader',
        options: {
          // 表示图片大小小于8kb,就会被base64处理。
          limit: 8 * 1024,
          // 问题,因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs语法,所以解析时会出问题[object Module]
          // 解决,关闭url-loader的es6模块化,使用commonjs解析
          esModule: false
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
        loader: 'html-loader'
      }
    ]
  },

此时我们再webpack

ok,完整的图片路径(根据图片内容生成的唯一hash值):
在这里插入图片描述

网页上看:
在这里插入图片描述
但是还有个需求,这个图片名字也太长了,我想要短一点的图片名字。可以,在url-loader里的options中设置name字段。

 //给图片进行重命名
          //[hash:10]取图片的hash值的前10位
          //[ext]取文件原来扩展名
          name: '[hash:10].[ext]'

再次webpack:
在这里插入图片描述

在这里插入图片描述

注意这里,webpack的优势:不会重复打包同一张图片

完整webpack.config.js

const {
  resolve
} = require('path');

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

module.exports = {
  entry: './src/index.js',

  output: {
    filename: './built.js',

    path: resolve(__dirname, 'build')
  },

  module: {
    rules: [{
        test: /\.less$/,
        // 使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        //处理一个loader用loader
        loader: 'url-loader',
        options: {
          // 表示图片大小小于8kb,就会被base64处理。
          limit: 8 * 1024,
          // 问题,因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs语法,所以解析时会出问题[object Module]
          // 解决,关闭url-loader的es6模块化,使用commonjs解析
          esModule: false,
          //给图片进行重命名
          //[hash:10]取图片的hash值的前10位
          //[ext]取文件原来扩展名
          name: '[hash:10].[ext]'
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
        loader: 'html-loader'
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],

  mode: 'development'
}

总结:

  1. 默认情况下是使用url-loader(依赖于file-loader,所以需要下载两个包)来处理图片的。
  2. 同时url-loader可以通过limit对图片进行限制(base64处理,有好有坏)。
  3. url-loader问题是无法处理html中的img图片,因此引入了html-loader来处理。
  4. 做法就是放在url-loader之前,将图片引入进来(url-loader无法改变图片所指的路径值)。
  5. 但是引进来的时候呢,html-loader使用的是commonjs语法模块化,而url-loader是es6语法,因此我们需要统一,因此需要将url-loader中的esModule关闭(设置为false)。
  6. 但是如果不想要图片名字那么长的话,可以重命名,可以设置哈希值取多少位。

07 打包其他资源

其他资源:比如说字体其他等,我们不需要进行其他处理,我们只需要引入就行了。

iconfont

去inconfont下载字体,下载完后,打开html文件查看如何使用。

一般来说,单色的话还是使用Font Class,如果是多色考虑Symbol,都可以。各有各的优劣,html文件中都写了。

在html文件中写class类名的时候,要用下面的,也就是点号后面的名字才行。
在这里插入图片描述

显示图标需要的文件放入src文件中。
在这里插入图片描述
开始打包

老规矩,写webpack.config.js文件

const {
  resolve
} = require('path');

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

module.exports = {
  entry: './src/index.js',

  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },

  module: {
    rules: [{
        //写之前考虑需要哪几个loader
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      //打包其他资源(除了html/js/css资源以外的其他资源)
      {
        //反向思考,我们排除css/jf/html资源
        exclude: /\.(css|js|html)$/,
        loader: 'file-loader'
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],

  mode: 'development'
}

我们webpack一下,成功地,在build目录下就会发现svg,woff等文件。
在这里插入图片描述
打开浏览器查看:
在这里插入图片描述
总结:

  1. 打包资源,我们就用file-loader处理
  2. 然后排除css、js、html、less等资源后,剩下的就是其他资源了打包即可
  3. 同样的,觉得名字太长就加上options。

08 devServer

我们如果想要增加新的代码,每次增加一点,就要重新webpack,加一点就要webpack。这未免也太烦人了。

因此,webpack就有一个东西,devServer,自动打包。让我们配置方便。

开发服务器 devServer

  1. 用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
  2. 特点:只会在内存中编译打包,不会有任何输出。
  3. 启动devServer指令为:npx webpack-dev-server,所以需要下包。
  4. npm i webpack-dev-server@3 -D

npx webpack-dev-server运行看看:
在这里插入图片描述
终端在这卡住
在这里插入图片描述

我们现在来改一下代码,在src(打包前的)下的index.html中增加代码保存看看
在这里插入图片描述
就会重新执行编译,并告诉你它做了什么,编译是否成功。

js文件也一样。
在这里插入图片描述

但是还是有一个问题:

每次我们输入指令打开devServer后,都要自己手动打开浏览器,可不可以自动打开呢?可以,加一个open:true。现在就可以自动打开浏览器了。

最后的最后,我们把之前用webpack打包的build文件夹删除掉,再输入命令 npx webpack-dev-server,会发现,网页依然能打开,但是却没有创建build文件夹。这就是webpack-dev-server的特点,只会在内存中编译打包,不会有任何输出。
在这里插入图片描述

完整代码:

const {
  resolve
} = require('path');

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

module.exports = {
  entry: './src/index.js',

  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },

  module: {
    rules: [{
        //写之前考虑需要哪几个loader
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      //打包其他资源(除了html/js/css资源以外的其他资源)
      {
        //反向思考,我们排除css/jf/html资源
        exclude: /\.(css|js|html)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],

  mode: 'development',

  // 开发服务器 devServer:用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
  // 特点:只会在内存中编译打包,不会有任何输出。
  // 启动devServer指令为:npx webpack-dev-server
  devServer: {
  	// 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    //自动打开浏览器
    open: true
  }
}

09开发环境基本配置

综合前面所学。

完整配置代码:

/*
  开发环境配置:能让代码运行即可。
  运行项目指令:
    webpack 会将打包的结果输出。
    npx webpack-dev-server 只会在内存中编译打包,没有输出。
*/


//引入path中的resolve方法
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
  resolve
} = require('path');

module.exports = {
  // 更改
  entry: './src/js/index.js',

  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },

  module: {
    rules: [
      // loader配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理样式中(css)的图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        // 之中又有模块化语法的冲突
        loader: 'html-loader',
      },
      {
        //处理其他资源
        // 其实url-loader就是file-loader过来的,只是说url-loader专门处理图片,且可以将图片转为base64来处理。
        exclude: /\.(html|js|css|less|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'others'
        }
      }
    ]
  },

  //处理html资源
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],

  mode: 'development',

  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}

环境配置的目的:

将所有需要处理的资源写好,并使用devServer优化,让我们写代码的时候只关注代码,其他的不用关心。

写完以后需要记住,都需要在入口js文件中引入。

但是看src目录下的情况:
在这里插入图片描述

杂乱无章。所以划分一下目录。

在这里插入图片描述
然后,如何合理的更改目录呢?从index.js开始,慢慢更改就行。因为他会根据你在js文件,html文件,css文件中引入的目录去创建目录。除了js需要在webpack.config.json中特殊修改外,其他都是在那些文件中修改。

在这里插入图片描述
打包,看似完美,实际上还有问题。

在这里插入图片描述
build的内容都输出到一块了。我希望它的结构和src的目录结构是一样的。所以现在一个个调。

js文件:

  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },

webpack,成功
在这里插入图片描述

在filename中加入js目录就行。但是output只是决定js文件的输出。其他文件的话需要另外配置。

图片文件:在url-loader配置中的options中加入outputPath字段。

注意,这里的imgs我们是在css中引用的,那在html中引用的img呢?html就是另外了,他是把图片路径变成唯一的hash值去定位图片。而不是生成图片。所以html中img标签引入的图片没有输出图片,所以也就不需要指定路径。而且html-loader是生成html文件的,也不会生成图片。不要混淆了。

      {
        // 处理样式中(css)的图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs'
        }
      },

webpack:
在这里插入图片描述

处理其他资源也一样:

      {
        //处理其他资源
        // 其实url-loader就是file-loader过来的,只是说url-loader专门处理图片,且可以将图片转为base64来处理。
        exclude: /\.(html|js|css|less|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'others'
        }
      }

webpack

在这里插入图片描述
ok。

但是发现没有,没有css文件结构,为啥呢?因为css文件都被打包到js文件中了,然后通过js输出一个link标签到head中,从而实现css样式的功能。

总结:

  1. 以entry作为入口,然后所有的路由都会输出到output指定的文件中。
  2. 其中图片资源会经过url-loader的处理,会单独输出出去,输出到哪里去呢?输出到output指定的目录下(上面例子是build中)。但是文件名会采用自己的hash值。如果想要输出到output目录下(build目录下)的指定文件夹中呢?就要在options中添加outputPath,指定自己想要输出的文件夹。
  3. 同样的,其他资源同理。
  4. 只有js文件输出到指定目录的方式不同,需要在output中修改,在output下的filename中添加目录名即可。

10构建环境介绍

生产环境介绍,由于现阶段只是使用开发环境,因此这部分以后的内容,后面需要用到再进行学习。

附录

基本的包:

{
  "name": "three_writing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open chrome.exe"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "@types/stats.js": "^0.17.0",
    "@types/three": "^0.127.1",
    "@types/typescript": "^2.0.0",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^6.4.1",
    "core-js": "^3.10.1",
    "css-loader": "^3.6.0",
    "file-loader": "^5.1.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.13.1",
    "less-loader": "^5.0.0",
    "stats.js": "^0.17.0",
    "style-loader": "^1.3.0",
    "three": "^0.127.0",
    "ts-loader": "^6.2.2",
    "typescript": "^3.9.9",
    "url-loader": "^3.0.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "-": "0.0.1",
    "@types/clean-webpack-plugin": "^0.1.3",
    "D": "^1.0.0",
    "clean-webpack-plugin": "^4.0.0-alpha.0"
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值