webpack从头捋

Posted 2021-01-14 且听风吟V

一、webpack 的概念和基础使用

1.安装和使用

全局安装   npm install webpack webpack-cli -g

依赖安装 npm init    npm install webpacl -D

2.npm scripts  npm 脚本

npm允许在package.json 文件里面，使用scripts字段定义脚本命令

{

"scripts": {

       "build" : "node build.js"

   }

}

上面代码时package.json文件的片段，里面的scripts字段是一个对象.它的每一个属性，对应一段脚本。比如，build命令对应的脚本是node build.js

命令行下使用npm run 命令,就可以执行这段脚本。

$ npm run build  #等价于   $ node build.js

这些定义在package.json里面的脚本，就称为npm脚本.

3.入口

在多个代码模块中会有一个起始的.js文件,这个便是webpack构建的入口.

webpack会读取这个文件，并从它开始解析依赖，然后进行打包。

一般情况下webpack默认的入口文件就是./src/index.js.

4.loader(装载机)

webpack中提供一种处理多种文件格式的机制，便是使用loader.我们可以把loader理解

成一个转换器，负责把某种文件格式的内容转换成webpack可以支持打包的模块.

在没有添加额外插件的情况下，webpack会默认把所有依赖打包成js文件,如果入口文件

依赖一个.hbs的模板文件以及一个.css的样式文件,那么我们需要handlebars-loader来处理

.hbs文件,需要css-loader来处理.css文件，最终把不同格式的文件都解析成js代码,

以便打包后在浏览器中运行。

5.plugin(插件)

在webpack的构建流程中，plugin用于处理更多其他的一些构建任务。可以这么理解，模块代码

转换的工作由loader来处理，除此之外的其他任何工作都可以交由plugin来完成。通过添加我们

需要的plugin，可以满足更多构建中特殊的需求。例如，要使用压缩JS代码的

uglifys-webpack-plugin插件，只需在配置中通过plugins字段添加新的plugin即可

除了压缩JS代码的uglifyjs-webpack-plugin,常用的还有定义环境变量的DefinePlugin，

生成css文件的ExtractTextWebpackPlugin等.

6.输出

webpack的输出即指webpack最终构建出来的静态文件。