初识webpack

什么是webpack？

webpack官网上这样介绍webpack——本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(如下图所示)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。

image.png

我们可以这样简单概括下：webpack是一个打包模块化Javascript的工具，他会从入口模块出发，识别出代码中的模块化导入语句，递归的找出入口文件的所有依赖，将入口和其所有依赖打包到一个单独的文件中，他是工程化，自动化思想在前端开发中的提现。

webpack初体验

1.安装node环境

webpack依赖于node环境，所以安装webpack前请确保你已安装node环境，推荐安装node的最新版本，可以提升webpack的打包速度。

2.安装webpack

webpack可以局部安装，也可以全局安装。全局安装webpack会将你项目中的webpack锁定到指定版本，造成不同项目因为依赖不同版本而导致冲突，构建失败，所以我们只介绍局部安装的方式。

初始化npm配置文件 npm init -y
安装核心库 npm install --save-dev webpack
安装命令行工具 npm install --save-dev webpack-cli

3.启动webpack

接下来我们编写一段代码来看看webpack会怎样运行。

在工程项目中新建src文件夹，在src目录下新增index.js和hello.js

hello.js

export function helloWebpack() {
   return 'hello Webpack'
}

index.js

import { helloWebpack } from './hello';
document.write(helloWebpack())

在命令行执行命令./node_modules/.bin/webpack，执行完成后命令行输出为：

image.png

查看工程项目，可以看到webpack命令执行后输出了文件夹dist，文件夹下有一个main.js文件，内容为：
(()=>{"use strict";document.write("hello Webpack")})();。main.js就是webpack根据我们代码的入口和模块依赖打包出来的代码。

在dist文件夹下新建index.html文件，引入main.js,查看运行效果
index.html





   
   
   
   hello wepack

在浏览器打开index.html,浏览器视口显示hello Webpack

image.png

至此我们一个webpack初体验就完成了。正如官网所说，webpack 开箱即用，可以无需使用任何配置文件。webpack 会假定项目的入口起点为 src/index.js，然后会在 dist/main.js 输出结果。并且在生产环境开启压缩和优化。

webpack基础配置结构

在上面的webpack初体验中，我们体验到了webpack开箱即用的快乐，然而通常我们的项目中还需要继续扩展webpack的能力，从而达到定制化的项目需求。webpack也为我们提供了默认的配置文件，我们可以在项目根目录下创建一个webpack.config.js文件，然后再执行webpack命令时，webpack会自动使用它。

webpack.config.js配置基础结构如下：

module.exports = {
    entry: "./src/index.js",  // 打包入口文件
    output: "./dist", //输出目录
    mode: "production",  // 打包环境
    module: {
        rules: [
        //loader模块处理
        ]
    },  
    plugins: [] //插件配置 
};

entry：指定webpack打包入口文件
Webpack执行构建的第一步将从 entry 开始，可抽象理解成输入

//单入口 SPA，本质是个字符串 
entry:{
    main: './src/index.js'
}
==相当于简写=== entry:"./src/index.js"

//多入口 entry是个对象 
entry:{
    index:"./src/index.js",
    login:"./src/login.js" 
}

2.output: 打包转换后的文件输出到磁盘位置
在 Webpack经过一系列处理并得出最终想要的代码后输出结果。

 
output: {
    filename: "bundle.js",//输出文件的名称
    path: path.resolve(__dirname, "dist")//输出文件到磁盘的目录，必须是绝对路径
},

//多入口的处理 
output: {
    filename: "[name][chunkhash:8].js",//利用占位符，文件名称不要重复
    path: path.resolve(__dirname, "dist")//输出文件到磁盘的目录，必须是绝对路径
},

3.mode：用来指定当前的构建环境
有三个可选项：production， development， none。默认是production。设置mode可以自动触发webpack内置的函数，达到优化的效果。

 
mode: 'development'

//也可以从CLI参数中传递
webpack --mode=development

选项	描述
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名。
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称，FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin 和 TerserPlugin 。
none	不默认使用任何优化选项

loader：模块解析，或者也叫模块解析器。
用于把模块原内容按照要求转换为新内容。webpack默认只知道如何处理js和json模块，那么其他格式的模块处理就需要loader来做。一个loader只做一件事情

常见的loader如下：

style-loader  //会把css-loader生成的内容，以style挂载到⻚面的heade部分
css-loader  //分析css模块之间的关系，并合成一个css
less-loader  // 将less转换为css
sass-loader  // 将sass转换为css
ts-loader  //将Ts转换成js 
babel-loader  //转换ES6、7等js新特性语法 
file-loader  //处理图片子图 
eslint-loader  //eslint
...

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

 
module:{
  rules:[
    {
        test:/\.xxx$/,  //指定匹配规则 
        use:{
            loader: 'xxx-load' //指定使用的loader 
        }
    }
  ] 
}

6.plugins: webpack的扩展插件

plugins作用于webpack打包整个过程
webpack的打包过程是有(生命周期概念)钩子。
plugin 可以在webpack运行到某个阶段的时候，帮你做一些事情，类似于生命周期的概念扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。作用于整个构建过程。

总结

在webpack系列专栏《带你从零构建webpack知识体系》的第一片中介绍了webpack的安装及基础配置，下节我们将一起通过实践这些配置，来进一步学习webpack。

webpack专栏相关代码地址：https://github.com/wanganni1014/zl-webpack.git 切换到对应分支即可。

初识webpack

什么是webpack？

webpack初体验

1.安装node环境

2.安装webpack

3.启动webpack

webpack基础配置结构

总结

你可能感兴趣的:(初识webpack)