webpack--【基础篇】【待更新】

webpack构建与发展简史

为什么需要构建工具？

转换ES6语法、转换JSX、CSS前缀补全/预处理器、压缩混淆，图片压缩等都需要用到构建工具

前端构建工具的演变历史

ant+YUI Tool → grunt[会涉及本地磁盘IO操作，速度较慢] → fls3、gulp[文件流] → rollup、webpack、parcel

webpack的优势

社区活跃，官方维护插件丰富，官方更新迭代快，灵活性好

初识webpack

配置文件

webpack官方默认配置文件为webpack.config.js，可以在命令行通过

webpack --config

指定配置文件

webpack配置文件组成部分

module.exports = {
    /*打包的入口文件*/
    entry: './src/index.js',
    /*打包的输出*/
    output: './dist/main.js',
     /*[production/development/none]*/
    mode: 'production',

    module: {
    /*Loader配置*/
        rules: [ 
          {test: /\.txt$/,use: 'raw-loader'}
        ]
    },

    /*插件配置*/
    plugins: [
        new HtmlwebpackPlugin({
          template: './src/index.html'
        })
    ]
}

零配置webpack包含内容

module.exports = {
    /*默认entry*/
    entry: './src/index.js',
    /*默认output*/
    output: './dist/main.js',
    mode: 'production',
    module: {
        rules: [ 
          {test: /\.txt$/,use: 'raw-loader'}
       ]
    },
    plugins: [ 
        new HtmlwebpackPlugin({
          template: './src/index.html'
        })
    ]
}

webpack环境安装

环境要求node.js和NPM

node.js安装在此不做展开

安装webpack和webpack-cli

1. 创建项目文件夹并在其中新建package.json
2. 初始化webpack
3. 安装webpack和webpack-cli
4. 检查webpack环境是否搭建成功

// 创建空目录和package.json
mkdir my-project
cd my-project
npm init -y // -y是默认选择yes，会生成初始webpack文件
// 安装webpack 和 webpack-cli
npm install webpack webpack-cli --save-dev
// 检查是否安装成功
./node_modules/.bin/webpack -v

安装过程展示

webpack构建初体验

1. 打开创建的项目文件夹，创建webpack.config.js文件
2. 创建src文件夹并写index.js等文件，之后打包，生成dist文件夹

webpack.config.js文件基础写法

'use strict'
const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production'
}

编写js文件，启动命令行

./node_modules/.bin/webpack // 直接运行是不指定默认运行配置文件名称
asset bundle.js 55 bytes [emitted] [minimized] (name: main)
orphan modules 63 bytes [orphan] 1 module
./src/index.js + 1 modules 137 bytes [built] [code generated]
webpack 5.32.0 compiled successfully in 445 ms

通过npm script运行webpack[便捷]

• 说明：通过npm run build 运行构建
• 原理：模块局部安装会在node_modules/.bin目录创建软链接

在package.json中“script"中添加

{
  "name": "my_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // 添加内容
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.32.0",
    "webpack-cli": "^4.6.0"
  }
}

启动控制台构建

npm run build

webpack核心概念

entry

 

output

 

loaders

 

plugins

 

mode

 

webpack资源解析

解析ES6

 

解析ReactJSX

 

解析CSS

 

解析Less和Sass

 

解析图片和字体

 

文件监听

 

热更新webpack-dev-server

 

热更新ebpack-dev-middleware

 

文件指纹

 

课程来源：极客学院

主讲：程柳峰