前端工程化 - webpack 基础

# 作用

转换 ES6 语法
转换 JSX
CSS 前缀补全/预处理器
压缩混淆
图片压缩

# 优势

社区生态丰富
配置灵活和插件化扩展
官方更新迭代速度快

# 配置文件

默认配置文件 webpack.config.js，可以通过 webpack --config 指定配置文件

代码语言：javascript复制

module.exports = {
  entry: './src/index.js', // 打包入口文件
  output: './dist/main.js', // 打包的输出
  mode: 'production', // 环境
  module: { // Loader 配置
    rules: [
      { test: /.txt/, use: 'raw-loader'}
    ]
  },
  plugins: [ // 插件配置
    new HtmlwebpackPlugin({
      template: './src/index.html'
    })
  ]
};

# 安装

代码语言：javascript复制

mkdir test
cd test
npm init -y

npm i webpack@4.31.0  webpack-cli@3.3.2 --save-dev

# Hello，world

配置文件

代码语言：javascript复制

const path = require('path');

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

src 内容

代码语言：javascript复制

// helloworld.js
export function helloworld () {
  return 'Hello Webpack';
};

// src/index.js
import { helloworld } from './helloworld';

document.write(helloworld());

执行打包

代码语言：javascript复制

./node_modules/.bin/webpack

通过 npm script 运行(原理：模块局部安装会在 node_modules/.bin 目录创建软链接)

代码语言：javascript复制

{
  "scripts": {
    "build": "webpack"
  }
}

# entry

用来指定打包入口

单入口

代码语言：javascript复制

module.exports = {
  entry: './src/index.js',
}

多入口

代码语言：javascript复制

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  }
};

# output

指定编译后文件输出位置

单入口

代码语言：javascript复制

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

多入口通过占位符确保文件名称的唯一

代码语言：javascript复制

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname   '/dist'
  }
};

# Loaders

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

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

常见 Loader

名称	描述
babel-loader	转换 ES6、ES7 等 JS 新特性语法
css-loader	支持 .css 文件的加载和解析
less-loader	将 less 文件转换成 css
ts-loader	将 TS 转换成 JS
file-loader	进行图片、字体等的打包
raw-loader	将文件以字符串的形式导入
thread-loader	多进程打包 JS 和 CSS

用法

代码语言：javascript复制

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { 
        test: /.txt$/, // 指定匹配规则
        use: 'raw-loader' // 指定使用的 loader
      }
    ]
  }
};

# Plugins

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

常用插件

名称	描述
CommonsChunkPlugin	将 chunks 相同的模块代码提取成公共 js
CleanWebpackPlugin	清理构建目录
ExtractTextWebpackPlugin	将 CSS 从 bunlde 文件里提取成一个独立的 CSS 文件
CopyWebpackPlugin	将文件或者文件夹拷贝到构建的输出目录
HtmlwebpackPlugin	创建 html 文件去承载输出的 bundle
UglifyjsWebpackPlugin	压缩 JS
ZipWebpackPlugin	将打包出的资源生成一个 zip 包

用法

代码语言：javascript复制

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

# mode

指定当前的构建环境是：production（默认）、development 或 none

选项	描述
development	设置 process.env.NODE_ENV 值为 development，开启 NamedChunksPlugin 和 NamedModulesPlugin
production	设置 process.env.NODE_ENV 值为 production，开启 FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrosPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin,TerserPlugin
none	不开启任何优化选项

# 解析 ES6、JSX

# 解析 ES6

安装依赖

代码语言：javascript复制

npm i @babel/core@7.4.4 @babel/preset-env@7.4.4 babel-loader@8.0.5 -D

webpack.config.js

代码语言：javascript复制

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader',
      }
    ]
  }
};

.babelrc

代码语言：javascript复制

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

# 解析 JSX

依赖安装

代码语言：javascript复制

npm i react@16.8.6 react-dom@16.8.6 @babel/preset-react@7.0.0 -D

.babelrc

代码语言：javascript复制

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

# 解析 CSS、Less 和 Sass

css-loader 用于加载 .css 文件，并且转换成 commonjs 对象

style-loader 将样式通过 <style> 标签插入到 head 中

# 解析 CSS

依赖安装

代码语言：javascript复制

npm i style-loader@0.23.1 css-loader@2.1.1

webpack.config.js

代码语言：javascript复制

const path = require('path');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

# 解析 Less

less-loader 用于将 less 转换成 css

代码语言：javascript复制

npm i less@3.9.0 less-loader@5.0.0 -D

webpack.config.js

代码语言：javascript复制

const path = require('path');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
};

打包 webpack 插件基础前端工程化

0 人点赞