webpack的起步

npm info webpack

打出webpack的所有信息,以及最新的版本下一个版本

npm i -g webpack@4 webpack-cli@4

安装webpack的命令行,以及脚手架的命令行

webpack的作用

代码分析(ES6转为ES5)
构建build
代码分析
代码压缩

Webpack的使用

用webpack转义js

首先需要初始化,会生成package.json

npm init -y

安装webpack,会出现node_modules目录

npm install webpack webpack-cli --save-dev

由于是本地安装,需要去node_modules内进行调用webpack.代码如下

./node_modules/.bin/webpack

通过npx 可以快速的找到webpack,但是该方法并不稳定,如果不能使用就用上面的代码

npx webpack

在src下创建index.js,然后通过import的方式引入x,js的内容,在正常浏览器里是不可以使用,我们通过webpack打包后就会出现一个可以在浏览器显示的js文件,在dist文件夹下

若没有配置webpack.config.json直接使用的话,会出现一个警告

![image-20210125102742453]

webpack.config.js

解决警告(mode)

此时需要在根目录创建一个webpack.config.js

然后配置好mode为development是给开始时候用的模式,代码不会压缩,但是若设置成production生产模式,代码会被压缩,便于上线时使用

entry,output

entry的配置是打包的入口,需要打包的文件

output是打包后的出口,包含两个变量:

path: path.resolve(__dirname, 'dist') /* 打包至当前目录下的dist文件夹中*/
1. filename: 打包后的名字
  1. filename可以写成[name].[contenthash].js 会生成带有hash数字的js文件

在此需要引入path文件,否则会报以下的错误

const path = require('path')

具体代码如下:

http缓存

http缓存是当网页打开时,会将一些固定的文件存入到硬盘中,在响应头,如果文件的名称没有改变的话,将会一直使用之前固定的缓存内容,所有我们使用hash的用处就是再次打包以后,文件的名字就会自动的改变,浏览器发现名字有改变,就会立刻重新加载.

!! 缓存是浏览器自动的

删除dist目录

由于每次都会添加一个hash数字的js文件,我们可以使用以下的代码先删除dist目录,再重新打包

rm -rf dist; webpack

但是每次都很麻烦,我们可以在package.json中scripts中加上build,简化代码的使用,代码如下

生成html文件

首先要安装依赖

npm i html-webpack-plugin --dev

然后在webpack.config.js中引入

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

然后再plugin(插件)中设置下面的代码即可

plugins: [new HtmlWebpackPlugin()]

添加html文件

不要在生成后的dist文件夹中的html文件直接修改,而要通过以下的操作才可以

new HtmlWebpackPlugin({
	title: '苏'
})

这样可以更改打包后的html文件的title内容

若不想使用自动的html文件,想要自己提供模板,可以加上template即可,代码如下

new HtmlWebpackPlugin({
	title: '苏',
    template: 'src/assets/index.html'
})

这样的话title不会成为你自己设置的内容,只要在模板的html文件中的title中写上这样的代码即可

<%= htmlWebpackPlugin.options.title %>

引入css文件

需要先安装css-loader,安装style-loader

npm install --save-dev css-loader
npm install --save-dev style-loader

在exports中需要写入这样的一个对象

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

如果碰到了css的文件名,将会把css读到的东西放到style中,再加入到html中

所以需要两个loader

需要在js中import引入css文件

webpack-dev-serve

npm i webpack-dev-server --dev

在在exports中需要写入以下代码

  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist' // 内容的文件夹
  },

然后添加一个命令

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

不依赖dist文件,会去读index.js 转译成可以运行的html.

在这里出现了一个这样的错误Error: Cannot find module 'webpack-cli/bin/config-yargs’

查询以后发现需要更改版本如下

将css抽成文件

首先安装mini-css-extract-plugin

npm install --save-dev mini-css-extract-plugin

然后在webpack.config.js中进行配置

  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
      ignoreOrder: false
    })
]

然后在rules内进行如下配置

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

即可将css文件抽离出来

生产环境和开发环境

在scripts中build可以通过以下代码取消不适用默认的生产环境而是使用开发环境,--config后是指定哪个webpack配置文件

  "scripts": {
    "build": "rm -rf dist && webpack --config webpack.config.prod.js"
  },

生产模式是有缓存的所以要抽离,开发模式是直接展示style

回顾

webpack内置了babel-loader的东西去将js 编译成另外一个js

import了一个css 通过style-loader css-loader 编译成了一个style标签

同时还可以通过MiniCssExtractPlugin把n个css变成了一个css

loader肯定是1对1 plugin 是n对1

通过HtmlWebpackPlugin 自动生成一个HTML文件,将css js引入

loader和plugin的区别(面试题)

翻译
1. loader: 加载器
2. plugin: 插件
中文解释
1. 加载器:用来去load一个文件(举例:css-loader style-loader)
2. 插件: 加强功能

完整回答:

loader是用来加载文件的
plugin用来扩展webpack的功能
loader主要用来加载一个个文件比如js文件,将js转换成低版本可以处理的js文件,css文件,将css变成html中的style标签
比如html-webpack-plugin用来生成html文件,mini-css-extract-plugin可以将css代码单独抽离成文件(hash,便于http缓存提高加载速度)

引入scss

首先需要安装loader

 yarn add sass-loader dart-sass

scss文件可以直接将css改成scss,然后在js中通过import引入

并且需要在webpack.config.js配置文件中写下如下的配置项

{
        test: /\.scss$/i,
        use: ['style-loader', 'css-loader', {
          loader: 'sass-loader',
          options: {
            implementation: require('dart-sass')
          }
        }]
      }

引入less和stylus

安装loader

yarn add less less-loader --dev

在配置项中这样设置

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

使用stylus的步骤

安装loader

npm install stylus-loader stylus --save-dev

在scss和less中可以使用变量设置颜色

@color: red;
body {
    color: @color;
}

image-loader

安装file-loader 处理图片的文件

yarn add file-laoder --save-dev

接着配置webpack-config.js文件,代码如下

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

在js的文件中通过以下代码即可完成image的引入

import img from './assets/1.jpg'
const app = document.getElementById('app')
app.innerHTML = `
  <img src="${img}">
`

懒加载

如何实现懒加载:懒加载其实就是延时加载，即当对象需要用到的时候再去加载。

用import('文件') 会得到promise,then前面写成功的代码,后面写失败的代码

const button = document.createElement('button')
button.innerText = '懒加载按钮'
app.appendChild(button)
button.onclick = () => {
  const a = import('./load.js')
  a.then(res => {
    res.default();
  })
}

部署到github

在github命令中写上

git commit -m 'remove dist' 即可删除dist文件夹

在master分支写一个部署脚本,用来切换分支

创建一个文件deploy.sh

yarn build 
git checkout gh-pages
rm -rf *.html *.css *.sh *.js *.json *.png
mv dist/* ./  // 将dist下的所有文件移动到当前目录
rm -rf dist
git add .
git commit -m 'update'
git push
git checkout - // 回到上一层目录

sh deploy.sh 运行上面的所有目录

总结

webpack作为打包工具,为我们的代码提供了很多的便利,由于要配置的loader和plugin比较多,大家碰到有需求的时候可以去官方文档,或者issue中进行学习查看,一定可以找到自己想要的答案
记得持续学习,不断跟进!加油!

Webpack起步