顾青菜

webpack学习笔记

首先贴上自己关键插件版本

    "webpack": "^5.52.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.1.1"

本文引用依赖较多，请注意配置是否已失效。

一、初识webpack

1、配置文件名称

webpack默认配置文件：webpack.config.js

可以通过webpack --config指定配置文件

module.exports = {
    entry: './src/index.js', // 4.0会默认制定入口位置为‘src/index.js’
    output: './dist/main.js', // 4.0会默认制定入口位置为‘dist/main.js’
    mode: 'production', // 环境
    module: {
        rules: [ // loader配置
            { 
                test:/\.txt$/, use: 'raw-loader'
            }
        ]
    },
    plugins:[
        new HtmlwebpackPlugin({ // 插件配置
            template: './src/index.html'
        })
    ]
}

2、安装nvm

安装 nvm（node.js version management，顾名思义是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs。下面列出下载、安装及使用方法。）

安装命令：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

or Wget:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

安装完之后添加到环境变量。

source ~/.bash_profile

// 推出并重启终端，查看是否安装成功: 
nvm --version

// 安装node.js: 
nvm i v10.15.3

// 创建项目文件夹，并初始化
mkdir 01project
cd 01project
// 所有询问都是yes
npm init -y
//安装webpack
npm i  webpack webpack-cli --save-dev
//查看项目是否安装成功
./node_modules/.bin/webpack -v
webpack 5.52.0
webpack-cli 4.8.0

3、一个简单例子

新建webpack.config.js文件

const path = require('path')

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

新建src/index.js、src/helloworld.js文件

// index.js文件
import { helloworld } from "./helloworld";
document.write(helloworld())

// helloworld.js文件
export function helloworld(){
    return 'hello webpack'
}

运行./node_modules/.bin/webpack命令，打包文件

新建dist/index.html文件，并引入打包文件




    
    
    
    Document

4、通过npm script运行webpack

为什么package.json可以直接运行node_module/.bin的命令

原理：模块局部安装会在node_module/.bin目录创建软链接

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },

新建src/serach.js文件

document.write('search info')

修改webpack.config.js文件 //通过占位符确保文件名称唯一

const path = require('path')

module.exports = {
    entry: {
        'index': './src/index.js',
        'search': './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    mode: 'production'
}

修改dist/index.html文件




    
    
    
    Document

5、核心概念之Loaders

webpack开箱即用只支持JS和JSON两种文件类型，通过Loaders去支持其他文件类型并且把她们转化成有效的模块，并且可以添加到依赖图中。

本身是一个函数，接受源文件作为参数，返回转换的结果。

常用的loaders有哪些

6、核心概念之Loaders

插件用于bundle文件的优化，资源管理和环境变量注入，作用域整个构建过程。

二、常用Loaders

2.1、解析es6、React JSX

2.1.1 使用babel-loader

安装相关依赖

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

webpack配置

module:{
        rules: [
            { 
                test: /\.js$/,
                use: 'babel-loader'
            }
        ]
    }

为了支持es6需要增加配置

    module:{
        rules: [
            { 
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    option: {
                        presets: ["@babel/preset-env"],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            }
        ]
    }

又或者给babel一个配置文件.babelrc，新建.babelrc文件

{
    "presets": ["@babel/preset-env"]
}

2.1.2 解析React JSX