什么是Webpack

Webpack是一个功能很强大的打包工具，它可以将各种文件打包成适合浏览器运行的格式。

它主要做以下几个事情：

转义代码
构建 build
代码压缩
代码分析

本文以Webpack@4举例

Webpack的使用——转义JS

初始化yarn 本地安装 webpack

npm init -y
yarn add webpack webpack-cli --dev

安装完成后，webpack就在 ./node_modules/.bin/webpack 中

./node_modules/.bin/webpack --version
npx webpack

我们使用这个路径就能找到webpack（使用npx也可以，但是不够稳定）

初始化webpack.config.js

首先在根目录下创建一个 webpack.config.js，在里面写以下代码（我们也可以创建base文件，来放其共有代码，配合

const base = require('./webpack.config.base.js')

...base

package.json 中，build改为

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

来使用，这里就不做演示）

var path = require('path');

module.exports = {
  mode: 'development'
};

设置出入口(使用contenthash，方便进行http缓存更新)

module.exports = {
  //...
  entry: './src/index.js',
  //入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js'
    //出口文件（在dist中）
  }
};

设置build快捷方式

在package.json中设置build方法

{
  ...
  "scripts": {
    "build": "rm -rf dist && npx webpack",
    ...
  },
  ...
}

此时，运行yarn build 即可快速删除原先的dist文件，打包一个新的

yarn build

转义JS

创建一个js文件，然后执行以下命令

npx webpack

我们可以发现多了一个dist文件夹，里面有转义完成的JS文件。

Webpack的使用——转义HTML

安装html插件

 yarn add html-webpack-plugin --dev

设置webpack.config.js

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

module.exports = {
...
  plugins: [new HtmlWebpackPlugin()]
};

生成空html

在只有js文件时，webpack会帮我们自动生成一个空html，并链接js文件

yarn build

设置空的html

设置tittle

plugins: [new HtmlWebpackPlugin(),
    {
      title: 'My App',
      //<%= htmlWebpackPlugin.options.title %> 表示使用config中的tittle
    }
  ]

设置内容

创建一个assets文件夹，里面放要打包进dist/index.html的内容

  plugins: [new HtmlWebpackPlugin({
    title: 'My App',
    template: "src/assets/index.html",
    //要打包进dist/index.html的内容
  }),
  ]

转义html

yarn build

Webpack的使用——引入CSS

安装css-loader

yarn add css-loader style-loader --dev

设置config

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

以上方法会将css变成style标签放到head中，常用于开发。但一般产品发布时，都需要将css抽成文件。（使用mini css extract plugin）

安装mini-css-extract-plugin

yarn add mini-css-extract-plugin --dev

配置config（最好将mode改为production）

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

module.exports = {
...
  plugins: [
  ...,
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use:[
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          },
          'css-loader',
        ],
        //不能与style标签的方法的use同时存在
      },
    ],
  },
};

Webpack的使用——引入SCSS

安装sass-loader 和 dart-sass

 yarn add sass-loader dart-sass --dev

配置config

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

Webpack的使用——引入LESS

安装 less 和 less-loader

yarn add less --dev
yarn add less-loader --dev

配置config

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

Webpack的使用——引入stylus

安装stylus 和 styl-loader

yarn add stylus-loader stylus --dev

配置config

...
module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.styl$/i,
        loader:['style-loader','css-loader','stylus-loader']
      },
      ...,
    ],
  },
};

Webpack的使用——引入image

安装file-loader

yarn add file-loader --dev

修改config

module.exports = {
 ...,
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      ...,
    ],
  },
};

webpack dev server

webpack dev server 类似于httpserver，可以实现代码的预览。

配置config(development模式下)

module.exports = {
  ...
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },
  ...
};

安装webpack dev server

yarn add webpack-dev-server --dev

配置package.json

{
...
  "scripts": {
    "start": "webpack-dev-server",
  },
  ...
}

运行webpack dev server

yarn start

注意：webpack dev server 不会build ，预览时代码只是加载到内存中了。

webpack 懒加载

什么是懒加载？

懒加载是一种提高用户体验的方法，例如当用户打开网页时，网页不会加载全部的文件，只有当文件不得不被使用时，才会加载。

如何使用懒加载

btn.onclick =()=>{
  const lazy = import('./lazy.js')
  //lazy.js 中的内容需要用 export default 导出
  //使用import(),在需要的时候引入
  lazy.then((module)=>{module.default()},()=>{})
  //懒加载是一个异步promise，可以用then调用，
  //以js文件为例子，module.default就是js中的内容
}

loader 与 plugin 的区别

loader 是加载器用来加载文件例如：css-loader style-loader babel-loader

plugin 是插件主要用来责加强功能例如：mini-css-extract-plugin html-webpack-plugin

Webpack 的使用