webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack
处理应用程序时,会帮我们处理模块间的各种依赖,然后将所有这些模块打包成一个或多个包(bundle)。而webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。
主要有loader和plugin
- loader:,我们也需要加载css、图片,也包括一些高级的将ES6转成ES5代码,将TypeScript转成ES5代码,将scss、less转成css,将.jsx、.vue文件转成js文件等等。它是一个转换器。
如:css-loader、style-loader,url-loader,file-loader(这两个都是为对图片进行base64编码,前者要求图片小于8Kb的,后者可大于8kb的,这样的话就不用去发起HTTP请求。直接通过编码的方式引入图片),label-loader(可将ES6转成ES5) - loader使用过程:
步骤一:通过npm安装需要使用的loader
步骤二:在webpack.config.js中的modules关键字下进行配置 - plugin是插件,是对webpack本身的拓展,是一个拓展器,比如打包优化,文件压缩等。
如压缩js的插件uglifyjs-webpack-plugin,打包html的插件HtmlWebpackPlugin。 - plugin的使用过程:
步骤一:通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二:在webpack.config.js中的plugins中配置插件。