webpack课程笔记1 -- webpack基础

官⽅⽹站：https://webpack.js.org/

 

概念

webpack is a module bundler(模块打包⼯具)

Webpack是⼀个打包模块化JavaScript的⼯具，它会从⼊⼝模块出发，识别出源码中的模块化导⼊语句，递
归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所有的依赖打包到⼀个单独的⽂件中。

是⼯程化、⾃动化思想在前端开发中的体现

 

安装webpack

环境准备

nodeJs https://nodejs.org/en/
版本参考官⽹发布的最新版本，可以提升webpack的打包速度

 

全局安装 不推荐

# 安装webpack V4+版本时，需要额外安装webpack-cli
npm install webpack webpack-cli -g

# 检查版本
webpack -v

# 卸载
npm uninstall webpack webpack-cli -g

 

全局安装webpack，这会将你项⽬中的webpack锁定到指定版本，造成不同的项⽬中因为webpack依赖不同版
本⽽导致冲突，构建失败

 

项⽬安装 推荐

# 安装最新的稳定版本
npm i -D webpack

# 安装指定版本
npm i -D webpack@<version>

# 安装最新的体验版本 可能包含bug,不要⽤于⽣产环境
npm i -D webpack@beta

# 安装webpack V4+版本时，需要额外安装webpack-cli
npm i -D webpack-cli

 

检查安装

webpack -v     //command not found 默认在全局环境中查找
npx webpack -v      // npx帮助我们在项⽬中的node_modules⾥查找webpack
./node_modules/.bin/webpack -v       //到当前的node_modules模块⾥指定webpack

 

启动webpack执⾏构建

webpack默认配置

webpack默认⽀持JS模块和JSON模块
⽀持CommonJS   Es moudule    AMD等模块类型
webpack4⽀持零配置使⽤,但是很弱，稍微复杂些的场景都需要额外扩展

默认配置   0配置:

const path = require("path");

module.exports = {
   // 必填 webpack执⾏构建⼊⼝
   entry: "./src/index.js",

   output: {
      // 将所有依赖的模块合并输出到main.js
      filename: "main.js",

      // 输出⽂件的存放路径，必须是绝对路径
      path: path.resolve(__dirname, "./dist")
    }
};

 

 

执⾏构建

# npx⽅式
npx webpack

npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去全局 里找。如果依然找不到，就会帮你安装。

# npm script
npm run dev

 

修改package.json⽂件：

"scripts": {
    "dev": "webpack"
},

原理就是通过shell脚本在node_modules/.bin⽬录下创建⼀个软链接。

package-lock.json 用来锁定安装的包版本和记录版本信息的。

 

构建成功

我们会发现⽬录下多出⼀个 dist ⽬录，⾥⾯有个 main.js ，这个⽂件是⼀个可执⾏的JavaScript⽂件，⾥⾯包含webpackBootstrap启动函数。

 

 

webpack配置核⼼概念

何为零配置

何为配置文件

entry

output

mode

loader

plugin

chunk

module

bundle

 

 

零配置

零配置是很弱的，特定的需求，总是需要⾃⼰进⾏配置
webpack有默认的配置⽂件，叫 webpack.config.js ，我们可以对这个⽂件进⾏修改，进⾏个性化配置
使⽤默认的配置⽂件：webpack.config.js
使⽤⾃定义配置⽂件： ⽐如webpackconfig.js，可以通过--config webpackconfig.js来指定webpack使⽤哪个配置⽂件来执⾏构建

"scripts": {
    "dev": "webpack --config ./webpackconfig.js"
},

 

 

配置文件

webpack.config.js配置基础结构

const path = require('path')

module.exports = {

        //打包⼊⼝⽂件
        entry: "./src/index.js",

       

        //出口
        output: {

               //  输出资源的存放位置，必须是绝对路径

               path: path.resolve(__dirname, "./dist"),

               //   资源名称

               filename: "main.js"

        },

 

       //打包环境  默认生产模式 

       //  production     development     none
        mode: "production",
        module: {
             rules: [
                  //loader模块处理
                 {
                       test: /\.css$/,
                       use: "style-loader"
                 }
             ]
        },
       plugins: [new HtmlWebpackPlugin()] //插件配置
};

 

entry   output

入口文件

定义方式：string   object  array

 

// string

entry: "./src/index.js"

 

// object

// 入口

entry: {

       other:  "./src/index.js",

       a:  "./src/a.js"

},

//出口

 output: {

      //  输出资源的存放位置，必须是绝对路径

      path: path.resolve(__dirname, "./dist"),

      //   资源名称   占位符  多入口对应多出口就可以使用 占位符的方式

      //  占位符   [name]   [hash]  [chunkhash]  [contenthash]

      //  [hash]      [name]-[hash].js    hash是指构建当前文件的版本号，当文件内容发生改变，会触发hash值更新

      //  [hash:6]      [name]-[hash:6].js    生成 hash 版本号的 前 6 位

      filename: "[name]-[chunkhash].js"

 },

dist 目录里生产  other.js,a.js 2个文件

//  spa  单页面应用   也可以理解为单入口

// mpa  多页面应用，利于 seo

 

mode

//  none   development    production

 

设置mode可以⾃动触发webpack内置的函数，达到优化的效果

开发阶段的开启会有利于热更新的处理，识别哪个模块变化
⽣产阶段的开启会有帮助模块压缩，处理副作⽤等⼀些功能

none:  设置为none时，很多自支持的插件是不开启的

 

 

moudle  loader

moudle 

模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
当webpack处理到不认识的模块时，需要在webpack中的module处进⾏配置，当检测到是什么格式的模块，使⽤什么loader来处理。

 

loader

模块解析，模块转换器，⽤于把模块原内容按照需求转换成新内容。
webpack是模块打包⼯具，⽽模块不仅仅是js，还可以是css，图⽚或者其他格式
但是webpack默认只知道如何处理js和JSON模块，那么其他格式的模块处理，和处理⽅式就需要loader了

 

module: {

       rules: [

                //   每一个loader所处理的功能都非常单一，css-loader只是帮助webpack处理css模块，将css编译进资源文件里

                //   需要使用 style-loader 将css放到head里，让样式生效

               {

                      test: /\.css$/,

                       //  多个loader是有执行顺序的，默认从右向左，可以通过配置改成从左向右                       

                      //  从右向左  compose

                      // 从左向右   pipe

                      //   css-loader 分析css模块之间的关系，并合成⼀个css,

                      //   当css-loader处理完后，将结果返回给 style-loader 去处理

                     //    style-loader 会把css-loader⽣成的内容，以style挂载到⻚⾯的heade部分                       

                      use: ["style-loader", "css-loader"]

               },

              {

                      test: /\.png$/,

                      use: ["file-loader"]

               },

       ]

}

 

plugins

plugin 可以在 webpack运⾏到某个阶段的时候，帮你做⼀些事情，类似于⽣命周期的概念。

扩展插件，在 Webpack 构建流程中的特定时机注⼊扩展逻辑来改变构建结果或做你想要的事情。

作⽤于整个构建过程

 

 

 

HtmlWebpackPlugin

htmlwebpackplugin 会在打包结束后，⾃动⽣成⼀个 html ⽂件，并把打包⽣成的 js 模块引⼊到该html中。

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

 

配置：

title: ⽤来⽣成⻚⾯的 title 元素

 

filename: 输出的 HTML ⽂件名，默认是 index.html, 也可以直接配置带有⼦⽬录。

 

template: 模板⽂件路径，⽀持加载器，⽐如 html!./index.html

 

inject: true | 'head' | 'body' | false , 注⼊所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body ，所有的 javascript 资源将被放置到 body 元素的底部， 'head' 将放置到 head 元素中。

 

favicon: 添加特定的 favicon 路径到输出的 HTML ⽂件中。

 

minify: {} | false , 传递 html-minifier 选项给 minify 输出

 

hash: true | false, 如果为 true, 将添加⼀个唯⼀的 webpack 编译 hash 到所有包含的脚本和 CSS ⽂件，对于解除 cache 很有⽤。

 

cache: true | false ，如果为 true, 这是默认值，仅仅在⽂件修改之后才会发布⽂件。

 

showErrors: true | false, 如果为 true, 这是默认值，错误信息会写⼊到 HTML ⻚⾯中

 

chunks: 允许只添加某些块 ( ⽐如，仅仅 unit test 块 )

 

chunksSortMode: 允许控制块在添加到⻚⾯之前的排序⽅式，⽀持的值：'none' | 'default' | {function}-default:'auto'

 

excludeChunks: 允许跳过某些块， ( ⽐如，跳过单元测试的块 )

 

clean-webpack-plugin

 

npm install --save-dev clean-webpack-plugin

 

 

 

const htmlWebpackPlugin = require("html-webpack-plugin");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

 

plugins: [

      new htmlWebpackPlugin({

               //   指定以哪一个html文件为模板

               template:  "./src/index.html",

               //  生成的html文件名，默认为 index.html

               filename:  "laohan.html"

      }),

      //  清理函数，每次构建时先将输出目录里文件清空后再生成构建后的文件

      new CleanWebpackPlugin()

]

 

 

bundle

output输出的资源文件就叫  bundle 文件

 

 

chunk

chunk 是指代码片段

 

bundle、chunk、module 三者之间的关系

 

chunk是指模块内代码被webpack处理后形成 webpack 输出文件内，eval所有执行的代码。当模块内代码有依赖文件时，就会生成二个chunk,形成chunks。

所以一个chunk对应一个模块，一个chunks对应一个或多个模块，一个bundle文件包含一个或多个chunk，也就是对应一个chunks。