webpack工程化实战-day1 webpack入门

一线蓝光
640 阅读4分钟

webpack入门

  1. webpack简介

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)，当webapck处理应用程序时，会递归的构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将模块打包成一个或多个bundle

webpack从入口模块出发，识别代码中的模块化导入语句，递归的找出入口文件的所有依赖，将入口和其依赖打包到一个单独的文件中。

  1. webpack安装
  • 环境准备

nodeJS

  • 安装方式

    • 局部安装
    npm init -y  #初始化npm配置文件
npm install --save-dev webpack  # 安装核心库
npm install --save-dev webpack-cli # 安装命令行工具

# 可以选择安装指定版本
npm i webapck@<version>
    • 全局安装
    # 安装webpack v4+版本时，需要额外安装webpack-cli
npm install webapack webpack-cli -g

# 检查版本
webpack -v
# 卸载
npm uninstall webpack webpack-cli -g

    注意:全局安装webpack，会将项目中的webpack锁定到指定版本，造成不同的项目中因为webpack依赖不同版本而导致冲突，构建失败

  1. 启动webpack

  • 3.1 webpack默认配置

    • webpack默认支持js模块和json模块
    • 支持CommonJS、ES Moudle、AMD等模块类型
    • webpack4支持零配置使用，但是复杂场景需要额外扩展

  • 3.2 准备执行构建

    • 根目录新建src文件夹
    • 新建 src/index.js、 src/index.json、src/other.js
    ### index.js
const json = require('./index.json') // commonJS
import { add } from './other.js' // es module
console.log(json, add(1,2))

### index.json
{
	"name": "一线蓝光"
}

#### other.js
export function add(num1,num2){
	return num1+num2
}

  • 3.3 执行构建

    # npx 方式
npx webpack

# npm script
npm run test

# 修改package.json 文件
"scripts": {
  "test": "webpack"
}
原理是通过shell脚本在node_modules/.bin目录下创建一个软链接

  • 3.4 构建成功

    根目录下会多出一个dist目录，里面有一个main.js文件，文件是一个可执行的JavaScript文件，里面包含webpackBootstrap启动函数

  • 3.5 默认配置

const path = require('path')
module.exports = {
	// 必填 webpack 执行构建入口
  entry: "./src/index.js",
  output: {
  	// 将所有依赖模块合并输出到main.js
      filename: "main.js",
      // 输出文件的存放路径，必须是绝对路径
      path: path.resolve(__dirname, "./dist")
  }
}
  1. webpack 配置核心概念
  • chunk：指代码块，一个chunk可能由多个模块组合而成，也用于代码合并与分割。
  • bundle:资源经过webpack流程解析编译后最终输出的成果文件
  • entry: 顾名思义，就是入口起点， 用来告诉webpack用哪个文件作为构建依赖图的起点，webpack会根据entry递归的去寻找依赖，每个依赖都被它处理，最后输出到打包成果中。
  • output:output描述打包的输出配置，包括输出文件的命名和位置等信息。
  • loader：默认webpack仅支持.js,.json文件，通过loader，可以解析其他类型的文件。loader的主要职责是让webpack处理更多的文件类型。
  • plugin：plugin可以让webpack控制构建流程，从而执行一些特殊的任务。
  • mode: 4.0开始，webpack支持零配置，加入mode概念，用于指定打包的目标环境，在打包的过程中启用webpack针对不同的环境下内置的优化

零配置

如果有项目特定的需求，需要自己进行配置。 webpack有默认的配置文件，webpack.config.js,可以对这个文件进行修改，进行个性化配置。

  • 默认配置文件：webpack.config.js
  • 使用自定义配置文件时：例如config.js,可以通过--config config.js来指定。
配置基础结构
module.exports = {
	// 1.单入口SPA，本质是个字符串，也可以写成对对象形式
	entry: "./src/index.js", //打包入口文件 
   // ===> entry: { main: './src/index.js' }
   // 2.多入口时
   entry: {
   	index: "./src/index.js",
       login: "./src/login.js"
   }
   // 1. 单入口
   output：{
   	filename: "bundles.js" //输出文件的名称
       path: path.resolve(_dirname,"dist") // 输出文件到磁盘的目录，绝对路径
   }, 
   // 2. 多入口时
   output: {
   	filename: "[name][chunkhash:8].js" // 利用占位符，文件名称不要重复
       path: path.resolve(_dirname, "dist")
   },
   mode: "production", // 打包环境  production/development/none 设置mode可以自动触发webpack内置的函数，达到优化的效果
   module: {
   	rules: [
       	// loader模块处理
           {
           	test: /\.css$/, // 指定匹配规则
               use: "style-loader" // 指定使用loader，当有多个时，使用数组 ["style-loader", "css-loader"]，执行顺序从右向左
           }
       ]
   },
   plugins: [new HtmlWebpackPlugin()] //插件配置
}

loader

模块解析，模块转换器，用于把模块原内容按照需求转换成新内容 webpack是模块打包工具，模块可以是js，css，图片或者其他格式。webpack默认只知道如何处理js和json模块，其他格式的处理需要loader。

常见loader

  • style-loader

  • css-loader

  • less-loader

  • sass-loader

  • ts-loader // 将TS转换为js

  • babel-loader // 转换ES6、7等新特性语法

  • file-loader

  • eslint-loader

案例： 样式处理
css-loader分析css模块之间的关系，合并成一个css
style-loader会把css-loader生成的内容，以style挂载到页面的head部分

使用前需要先安装对应的loader
npm install style-loader css-loader -D

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

module

模块，在Webpack中，一切皆模块，一个模块对应一个文件，Webpack会从配置的entry开始递归找出所有依赖的模块

当webpack处理到不认识的模块时，需要在webpack中的module处进行配置，当检测到是什么格式的模块，使用什么loader来处理。

avatar
文章
阅读
粉丝