Webpack定义本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler)当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependen

cygraph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundleWebpack五个核心概念entry入口配置**入口起点(entrypoint)**指示webpack应该

使用哪个模块，来作为构建其内部依赖图的开始进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的每个依赖项随即被处理，最后输出到称之为bundles的文件中.可以通过在[web

pack配置]中配置entry属性，来指定一个入口起点（或多个入口起点）默认值为./srcoutput输出路径output属性告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，

默认值为./dist基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中loaderloader让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaSc

ript）loader可以将所有类型的文件转换为webpack能够处理的有效[模块]，然后你就可以利用webpack的打包能力，对它们进行处理本质上，webpackloader将所有类型的文件，转换为应

用程序的依赖图（和最终的bundle）可以直接引用的模块在webpack配置中定义loader时，要定义在module.rules中，而不是rules**plugins插件简单的说，plugins就是用

来处理loader翻译后的文件，进行更多的操作与执行，从打包优化和压缩，一直到重新定义环境中的变量Mode模式Webpack模式分为开发模式development和生产模式production,可以启用

相应模式下的webpack内置的优化

Webpack初体验安装webpack1.全局安装npmiwebpackwebpack-cli-g2.项目安装开发依赖npmiwebpackwebpack-cli-打包文件webpack./src/in

dex.js-o./build/test.js--mode=development

执行打包后的文件node./build/x.js

Webpack支持打包js/json文件，其它格式通过loader来处理

查看打包后的文件

打包样式文件csslesssass.....Webpack本身是只支持js文件格式的，其它格式文件不能直接处理，它需要经过loader来处理后，然后使用插件来进行配置处理例如下面：使用loader来处理

样式文件转js，文件，原理是，将样式文件转为字符串，最终转换成Webpack可识别的文件loader处理在webpack的配置中loader有两个目标：test属性，用于标识出应该被对应的loader进

行转换的某个或某些文件use属性，表示进行转换时，应该使用哪个loaderloader使用：下载使用module:{rules:[//不同文件必须配置不同的loader处理{//匹配哪些文件test:/

.css$/,//使用哪些插件来处理翻译后的文件use:[//use数组loader执行顺序从右到左，从上到下style-loader,css-loader]},{test:/.less$/,use

:[style-loader,css-loader,//将less编译成css文件less-loader]}]},复制代码在项目的根目录下新建一个webpack.config.js的配置文件来配置Web

pack

注意项目中用到了哪些loader，就需要安装对应的loaderloader的执行顺序为从右到左，从下到上，如果顺序弄错，会发出警告，编译不成功不同loader处理对应不同的对象，这些对象都放置在rule

s中。rules的每个对象包括test和use在进行Webpack配置后，可以使用webpack来进行打包文件打包后开发环境下的代码

测试是否成功可以引用打包后的文件

▏ END   ▏本文来自掘金 原文链接已加可自行阅读