webpack5

概念

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)

 

 

官网地址

Mode | webpack

一 .依赖配置

1.1.初始化包环境

npm init

或

yarn init

1.2.安装依赖包 

(两个包,默认安装最新版本)

-D -dev 开发项目中用到的辅助工具 (开发阶段用,上市不用就加-D

-S save js -S (一直要用)

yarn add webpack webpack-cli -D

1.3.在package.json完成一下配置

"scrpit":{
    "build":"webpack"
}

1.4初次打包体验

需求： 2个js文件 ->打包成1个js文件

分析：

①：新建src下的资源

②：add.js – 定义求和函数并导出

③：index.js – 引入add模块并使用函数输出结果

add.js

export default (a, b) => {
  return a + b;
};

index.js

import add from "./add";
console.log(add);

 

④：执行 `yarn build` 自定义命令, 进行打包 (确保终端路径在src的父级文件夹)

yarn bulid

⑤：打包后默认生成dist和main.js, 观察其中代码

二 .webpack配置之entry和output

entry:webpack解析的入口,即要打包的入口文件的路径,默认为src/index.js

output:指定输出的路径,默认为dist/main.js

2.1新建webpack.config.js文件

默认打包入口为src - > index.js,可通过enty修改默认输出文件路径 dist - > main.js 可通过output的filename修改

在Webpack5中，mode（模式）有三种：

development（开发环境模式）(代码不会压缩 混淆)
production（生产环境模式）（压缩，混淆，加密....... 不可读）
none或' '（空）

 单文件打包

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
  },
};

多文件打包(多个入口起点)

const path=require('path');
 
module.exports={
	mode:'development'
	entry:{
		home:'./home.js',
		about:'./about.js',
		other:'./other.js'
	},
	output:{
		filename:'[name].bundle.js'
	},
}

三.loader整体介绍

 在webpack看来 一切皆模块，图片，样式文件，js文件.... 。 但是webpack默认只能处理js模块，对于非js的内容，例如css, less文件，图片文件等等 它就需要一些帮手来处理了。这些帮手就是loader。

       webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

html-loader: 我们有时候想引入一个html页面代码片段赋值给DOM元素内容使用，这时就用到html-loader
ts-loader:用于配置项目typescript
sass-loader/less-loader:css预处理器，我们在项目开发中经常会使用到的，编写css非常便捷
file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
source-map-loader：加载额外的 Source Map 文件，以方便断点调试
image-loader：加载并且压缩图片文件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM  *** 作去加载 CSS。
eslint-loader：通过 ESLint 检查 JavaScript 代码

3.1下面以less-loader示例

安装style-loader和css-loader

yarn add css-loader style-loader -D

安装less-loader

npm install --save-dev less-loader less

配置loader

// 配置webpack扩展插件loader
  module: {
    rules: [
      {
        // 正则匹配以css结尾的文件
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      // 配置less-loader
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader", // creates style nodes from JS strings
          },
          {
            loader: "css-loader", // translates CSS into CommonJS
          },
          {
            loader: "less-loader", // compiles Less to CSS
          },
        ],
      },
    ],
  },

在index.js中引入main.less

// index.js
import "../src/assets/styles/main.less";

mian.less

@springfestival: red;
div {
  background-color: aqua;
  color: @springfestival;
}

.title {
  width: 100px;
  height: 100px;
}

在dist目录创建index,html

  
    
    
    
    
  
  
    helloworld
    
  

重新打包

npm run build

打开index,html查看

 3.2babel-loader降级处理

 Babel 是一个 JavaScript 编译器，它是一个工具链，主要的用途就是在旧的浏览器或环境中将ECMAScript 2015+ 代码转换为向后兼容的 js 代码。

npm install -D babel-loader @babel/core @babel/preset-env webpack

module: {
  rules: [
    {
      test: /\.js$/,
      //不包含的内容的,因为已经做过降级处理,再次处理增加耗时
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

四.插件(plugins)

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！

插件目的在于解决 loader 无法实现的其他事。

4,1 html-webpackPlugins

npm init html-webpack-plugin

配置webpack.config.js 

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

const config = {
  entry: './src/index.js',
  output: {
    filename: 'index_bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // new webpack.optimize.UglifyJsPlugin(),

    // 插件,把哪个文件作为最终打包编译后前端html文件输出
    new HtmlWebpackPlugin({template: './public/index.html'})
  ]
};

module.exports = config;

五、webpack实时打包webpack-dev-server

解决: 起一个开发服务器, 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行在内存中给浏览器使用

总结: webpack开发服务器, 把代码运行在内存中, 自动更新, 实时返回给浏览器显示

5.1下载模块包

yarn add webpack-dev-server -D

5.2在package.json自定义webpack开发服务器启动命令serve

"script":{
    "build":"webpack",
    "serve":"webpack serve"
}

5.3指定端口号

module.exports={
    devServer:{
        port:3000
    }
}

 5.4 启动服务

npm run serve