webpack教程

第 1 章：webpack 简介
- 1.1 webpack 是什么
- 1.2 webpack 五个核心概念
- - 1.2.1 Entry 入口(Entry)
  - 1.2.2 Output 输出(Output)
  - 1.2.3 Loader
  - 1.2.4 Plugins
  - 1.2.5 Mode
第 2 章：webpack 的初体验
- 2.1 初始化配置
- 2.2 编译打包应用
第 3 章：webpack 开发环境的基本配置
- 3.1 创建配置文件
- 3.2 打包样式资源
- 3.3 打包 HTML 资源
- 3.4 打包图片资源
- 3.5 打包其他资源
- 3.6 devserver
- 3.7 开发环境配置
第 4 章：webpack 生产环境的基本配置
第 5 章：webpack 优化配置
第6 章：webpack 配置详情
第 7 章：webpack5 介绍和使用

第 1 章：webpack 简介

1.1 webpack 是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

1.2 webpack 五个核心概念

1.2.1 Entry 入口(Entry)

指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

1.2.2 Output 输出(Output)

指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

1.2.3 Loader

Loader 让 webpack 能够去处理那些非 JavaScript 文件 (webpack 自身只理解 JavaScript)

1.2.4 Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

1.2.5 Mode

模式(Mode)指示 webpack 使用相应模式的配置。

选项	描述	特点
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。	能让代码本地调试运行的环境
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。	能让代码优化上线运行的环境

第 2 章：webpack 的初体验

2.1 初始化配置

初始化 package.json 。输入指令:

npm init

下载并安装 webpack 。输入指令:

npm install webpack webpack-cli -g
npm install webpack webpack-cli -D

2.2 编译打包应用

创建文件
运行指令

 开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development

功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。

生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production

功能：在开发配置功能上多一个功能，压缩代码。

结论webpack 能够编译打包 js 和 json 文件。
能将 es6 的模块化语法转换成浏览器能识别的语法。
能压缩代码。
问题不能编译打包 css、img 等文件。
不能将 js 的 es6 基本语法转化为 es5 以下语法。

第 3 章：webpack 开发环境的基本配置

3.1 创建配置文件

根目录下创建文件 webpack.config.js
配置内容如下

const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。
module.exports = { entry: './src/js/index.js', // 入口文件output: { // 输出配置filename: './built.js', // 输出文件名 path: resolve(__dirname, 'build/js') // 输出文件路径配置},mode: 'development' //开发环境
};

运行指令:

webpack

3.2 打包样式资源

创建文件
下载安装 loader 包

npm i css-loader style-loader less-loader less -D

修改配置文件

/*webpack.config.js  webpack的配置文件作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。
*/// resolve用来拼接绝对路径的方法
const { resolve } = require('path');module.exports = {// webpack配置// 入口起点entry: './src/index.js',// 输出output: {// 输出文件名filename: 'built.js',// 输出路径// __dirname nodejs的变量，代表当前文件的目录绝对路径path: resolve(__dirname, 'build')},// loader的配置module: {rules: [// 详细loader配置// 不同文件必须配置不同loader处理{// 匹配哪些文件test: /\.css$/,// 使用哪些loader进行处理use: [// use数组中loader执行顺序：从右到左，从下到上 依次执行// 创建style标签，将js中的样式资源插入进行，添加到head中生效'style-loader',// 将css文件变成commonjs模块加载js中，里面内容是样式字符串'css-loader']},{test: /\.less$/,use: ['style-loader','css-loader',// 将less文件编译成css文件// 需要下载 less-loader和less'less-loader']}]},// plugins的配置plugins: [// 详细plugins的配置],// 模式mode: 'development', // 开发模式// mode: 'production'
}

运行指令:

webpack

3.3 打包 HTML 资源

创建文件
下载安装 plugin 包

npm install --save-dev html-webpack-plugin

修改配置文件

/*loader: 1. 下载   2. 使用（配置loader）plugins: 1. 下载  2. 引入  3. 使用
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [// loader的配置]},plugins: [// plugins的配置// html-webpack-plugin// 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）// 需求：需要有结构的HTML文件new HtmlWebpackPlugin({// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）template: './src/index.html'})],mode: 'development'
};

运行指令: webpack

3.4 打包图片资源

创建文件
下载安装 loader 包

npm install --save-dev html-loader url-loader file-loader

修改配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.less$/,// 要使用多个loader处理用useuse: ['style-loader', 'css-loader', 'less-loader']},{// 问题：默认处理不了html中img图片// 处理图片资源test: /\.(jpg|png|gif)$/,// 使用一个loader// 下载 url-loader file-loaderloader: 'url-loader',options: {// 图片大小小于8kb，就会被base64处理// 优点: 减少请求数量（减轻服务器压力）// 缺点：图片体积会更大（文件请求速度更慢）limit: 8 * 1024,// 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs// 解析时会出问题：[object Module]// 解决：关闭url-loader的es6模块化，使用commonjs解析esModule: false,// 给图片进行重命名// [hash:10]取图片的hash的前10位// [ext]取文件原来扩展名name: '[hash:10].[ext]'}},{test: /\.html$/,// 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）loader: 'html-loader'}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development'
};

3.5 打包其他资源

创建文件
修改配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']},// 打包其他资源(除了html/js/css资源以外的资源){// 排除css/js/html资源exclude: /\.(css|js|html|less)$/,loader: 'file-loader',options: {name: '[hash:10].[ext]'}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development'
};

3.6 devserver

创建文件
修改配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']},// 打包其他资源(除了html/js/css资源以外的资源){// 排除css/js/html资源exclude: /\.(css|js|html|less)$/,loader: 'file-loader',options: {name: '[hash:10].[ext]'}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development',// 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）// 特点：只会在内存中编译打包，不会有任何输出// 启动devServer指令为：npx webpack-dev-serverdevServer: {// 项目构建后路径contentBase: resolve(__dirname, 'build'),// 启动gzip压缩compress: true,// 端口号port: 3000,// 自动打开浏览器open: true}
};

运行指令

 npx webpack-dev-server

3.7 开发环境配置

创建文件
修改配置文件

/*开发环境配置：能让代码运行运行项目指令：webpack 会将打包结果输出出去npx webpack-dev-server 只会在内存中编译打包，没有输出
*/const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [// loader的配置{// 处理less资源test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']},{// 处理css资源test: /\.css$/,use: ['style-loader', 'css-loader']},{// 处理图片资源test: /\.(jpg|png|gif)$/,loader: 'url-loader',options: {limit: 8 * 1024,name: '[hash:10].[ext]',// 关闭es6模块化esModule: false,outputPath: 'imgs'}},{// 处理html中img资源test: /\.html$/,loader: 'html-loader'},{// 处理其他资源exclude: /\.(html|js|css|less|jpg|png|gif)/,loader: 'file-loader',options: {name: '[hash:10].[ext]',outputPath: 'media'}}]},plugins: [// plugins的配置new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development',devServer: {contentBase: resolve(__dirname, 'build'),compress: true,port: 3000,open: true}
};

第 4 章：webpack 生产环境的基本配置

第 5 章：webpack 优化配置

第6 章：webpack 配置详情

第 7 章：webpack5 介绍和使用

Webpack详细教程相关推荐

Vue Router的详细教程
Vue Router的详细教程安装 #直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 ...
Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目
上篇请移步到Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客上一篇博文已经对Node.js的安装与配置进行了详细介绍. 另外:文中项目存放的路径及项目名称可根据自身实际情况进行 ...
webpack基础教程
webpack基础教程一 webpack五大核心二 webpack处理css资源三 webpack处理less.scss.sass.styl资源四 webpack-module的详细配置五 ...
gulp菜鸟级零基础详细教程，嘴对嘴教会你怎么使用gulp
gulp菜鸟级零基础详细教程,嘴对嘴教会你怎么使用gulp 相信大家一定听说过gulp或者webpack,grunt等前端构建工具,这些是做什么用的我也不知道,也许他们会和一些前端框架用到一起,让开发 ...
从0到1搭建webpack2+vue2自定义模板详细教程
前言 Webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是很详细,对于很多个性化配置还是需要自己过一遍文档.Vue官方提供了多个vue-temp ...
手把手带你入门前端工程化——超详细教程（高级前端必备）
本文将分成以下 7 个小节: 技术选型统一规范测试部署监控性能优化重构部分小节提供了非常详细的实战教程,让大家动手实践. 另外我还写了一个前端工程化 demo 放在 github 上.这 ...
手把手带你入门前端工程化——超详细教程
授权自@谭光志链接:https://segmentfault.com/a/1190000037752931,也可点击阅读原文本文将分成以下 7 个小节: 技术选型统一规范测试部署监控性能 ...
手把手从零开始搭建k8s集群超详细教程
本教程根据B站课程云原生Java架构师的第一课K8s+Docker+KubeSphere+DevOps同步所做笔记教程 k8s集群搭建超详细教程 1. 基本环境搭建 1. 创建私有网络 2. 创建服务 ...
win10系统优化计算机,全面优化win10电脑系统详细教程 | 专业网吧维护
全面优化win10电脑系统详细教程以下针对win10系统的电脑全面优化的步骤: 步骤1:禁止开机启动项 1.首先我们先来优化开机速度,拖慢开机速度的首先是开机自启动项,Ctrl + Shift + ...

Webpack详细教程