webpack笔记

webpackb笔记

什么是webpack

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

webpack是做什么的

• 转译代码（ES6转ES5 ,SCSS转译CSS）
• 构建build
• 代码压缩
• 代码分析

安装

安装条件：

在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。 使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能， 或者缺少相关 package。

本地安装

要安装最新版本或特定版本，请运行以下命令之一：
npm install --save-dev webpack
//或指定版本
npm install --save-dev webpack@<version>
如果你使用 webpack v4+ 版本，并且想要在命令行中调用 webpack，你还需要安装 CLI。
npm install --save-dev webpack-cli

对于大多数项目，我们建议本地安装。这可以在引入重大更新(breaking change)版本时，更容易分别升级项目。 通常会通过运行一个或多个 npm scripts 以在本地 node_modules 目录中查找安装的 webpack， 来运行 webpack：

"scripts": {
  "build": "webpack --config webpack.config.js"
}

想要运行本地安装的 webpack，你可以通过 node_modules/.bin/webpack 来访问它的二进制版本。另外，如果你使用的是 npm v5.2.0 或更高版本，则可以运行 npx webpack 来执行。

全局安装

最新版本安装
npm install --global webpack

不推荐 全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中， 可能会导致构建失败。

webpack.config.js 配置文件

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
    //入口文件
    entry: './src/index.js',
    //出口文件默认dist目录下
    output: {
        filename: '[name].[chunkhash].js'
    },
    //插件配置
    plugins: [
        new HtmlWebpackPlugin({
            title: '我是首页',
            template: 'src/assets/index.html'
        })
    ]
};

html-webpack-plugin

HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。

安装plugin

yarn add html-webpack-plugin --dev

用法配置

//引入html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].[chunkhash].js'
    },
    //使用
    plugins: [
        new HtmlWebpackPlugin({
            title: '我是首页',
            template: 'src/assets/index.html'
        })
    ]
};

mini-css-extract-plugin（把css抽成文件）

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。 建议 mini-css-extract-plugin 与 css-loader 一起使用。

安装plugin

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

使用

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
      new MiniCssExtractPlugin({
            // 类似于 webpackOptions.output 中的选项
            // 所有选项都是可选的
            filename: '[name].[chunkhash].css',
            chunkFilename: '[id].css',
        })
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

webpack-dev-server： 为你提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能。设置如下：

安装

yarn add webpack-dev-server --dev

在开始前，我们先将 mode 设置为 'development'，并将 title 设置为 'Development'。

webpack.config.js

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

 module.exports = {
  //设置为开发环境development
  mode: 'development',
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
      title: 'Output Management',
      title: 'Development',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
 };

修改配置文件，告知 dev server，从什么位置查找文件

webpack.config.js

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

 module.exports = {
   mode: 'development',
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
   devtool: 'inline-source-map',
 //告知 dev server，从什么位置查找文件 
  devServer: {
    static: './dist',
  },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Development',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
 };

我们添加一个可以直接运行 dev server 的 script：

package.json

{
  "name": "webpack-deom2",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
    //添加scripts
  "scripts": {
    "start": "webpack-dev-server",
    "build": "rm -rf dist && webpack --config webpack.config.prod.js"
  },
  "devDependencies": {
    "@webpack-cli/serve": "^1.6.1",
    "css-loader": "3",
    "file-loader": "^4.3.0",
    "html-webpack-plugin": "3",
    "less": "3.10.3",
    "less-loader": "5.0.0",
    "mini-css-extract-plugin": "0.8.0",
    "sass-loader": "8.0.0",
    "style-loader": "1",
    "webpack": "4.41.2",
    "webpack-cli": "3.3.12",
    "webpack-dev-server": "3.9.0"
  }
}

引入css

安装 loader

安装css-loader，style-loader
yarn add style-loader，css-loader --dev

配置

  module: {
        rules: [
            {
                test: /\.css$/,
                //必须两个loader一个配置
                use: ['style-loader', 'css-loader']
            },
        ],
    }

引入less

安装loader

yarn add less-loader

配置

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

引入stylus

安装loader

yarn add stylus-loader --dev

使用

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

引入图片

安装loader

yarn add file-loader --dev

使用

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

引入scss

安装loader

yarn add dart-sass --dev

使用

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

懒加载

const button = document.createElement('button')
button.innerText = '懒加载'
button.onclick = () => {
    const promise = import('./lazy')
    promise.then((module) => {
        const fn = module.default
        fn()
    }, () => {
        console.log('模块加载错误')
    })
}
div.appendChild(button)