浙江建设三类人员报名网站,常见的网络直接营销有哪些,软件开发专业考研,网站首页 关键词webpack说复杂也不复杂。不复杂#xff0c;核心概念不外乎是entry, output, loader, plugins。webpack4还新增了optimization选项#xff0c;用于代码分割和打包优化。现在webpack官网文档已经写的挺棒了。而当你真正开始手写一个webpack.config.js的时候#xff0c;你就会发…webpack说复杂也不复杂。不复杂核心概念不外乎是entry, output, loader, plugins。webpack4还新增了optimization选项用于代码分割和打包优化。现在webpack官网文档已经写的挺棒了。而当你真正开始手写一个webpack.config.js的时候你就会发现要记得东西有点儿多还挺复杂的……好啦本文讲的是手动编写基于vue开发的webpack4配置以下内容主要针对生产环境开发环境的配置于之后奉上。 webpack的核心概念包含以下几个要牢记entry - webpack打包的入口并非代码执行的入口output - webpack打包后生成的静态资源文件它是最终会被html引用的文件loader - 对于非js的模块(或说文件)转化成webpack能够处理的js文件对于还要进一步处理的js文件进行加工处理plugins - 参与到整个webpack打包的过程(webpack打包的各个生命周期)可与loader结合使用提供相应/辅助的功能。Entry:entry可以是单个入口也可以是多入口。单个入口的写法:entry: a.js 或 [a.js, b.js]多个入口的写法:entry: { a: a.js, b: b.js}webpack会以你给的entry为入口根据dependency graph挨个打包结合其他相应的设置最终输出成页面要引用的静态资源文件。注意了这里提到的“结合其他相应的设置”很可能是不止一处的设置。outputoutput里面的选项主要有(但远不止以下):filename: [name].[hash].bundle.js // [name]和entry里面的name对应path: path.resolve(__dirname, dist) // 指最终打包生成的目录publicPath: 可以是./dist/ 或 / 或 cdn地址 // 指外部访问静态资源文件的路径chunkFilename: [name].chunk.js // 指用webpack.ensure或import().then()动态加载的文件loaderloader就是把模块转换成webpack能够处理的js文件(如css,scss,vue等非js模块)或者对js模块本身进行再加工(如编译es6语法等)。loader的写法好有好几种loader一般放在module这个对象里的rules里面现总结以下4种总结一下loader的常用四种写法use: [xxx, xxx]use: [{loader: XXX}, {loader: XXX}]use: [{ loader: XXX, options: {}}, XXX]loader: [XXX, XXX] 或 loader:XXX, options: {XXX}常用的loader有:处理样式的style-loader,css-loader,postcss-loader,sass-loader,less-loder处理es6的babel-loader(要连同babel-core, babel-preset-env)一起用处理图片的file-loader, url-loader, image-webpack-loaderPlugins常用的plugin有压缩jsuglifyjs-webpack-plugin合并压缩css mini-css-extract-pluginoptimize-css-assets-webpack-plugin清除目录clean-webpack-plugin生成htmlhtml-webpack-pluginpostcss相关的postcss-plugin-px2rempostcss-preset-envpostcss-spritesautoprefixerwebpack自带的方法webpack.ProvidePlugin等是不是开始觉得要记得东西很多啊蛤蛤蛤蛤蛤蛤不要急要记得东西远不止这些……以上讲的都是些概念和基本配置结合起来怎么用呢先上目录因为只写一个注册页笔者没有用vue-cli选择手动撸一个vue的webpack配置。打包编译vue文件需要用到vue-loader样式需要用vue-style-loader那么怎么办呢一定记住安装vue-template-compiler虽然它只存在于你的node_modules文件夹中但是vue-loader需要用到它所以务必记住安装。另外在loader中设置了vue-loader之外还得设置一个变量const { VueLoaderPlugin } require(vue-loader)并且在plugins里面创建一个它的实例才行即new VueLoaderPlugin()。ps. 系不系感觉复杂了我也布吉岛为神马这些配置要分散在不同地方进行配置这就加剧了webpack上手的难度。。。。在我们书写配置的时候一定要清楚自己想要webpack帮助你达到什么目的以此来选择需要的loader和plugin以及其他辅助工具。除了上面讲到的转化vue模块外在生产环境下我需要webpack帮助我的主要是打包、压缩js,css,images自动生成html文件以及每次打包前先删除已存在的dist目录。所以上图中所引入的模块就是能完成这些功能的基本工具。这个是利用你的template文件生成最终的html文件并对html文件进行打包压缩的它会把html文件打包压缩成如下上面两张图分别在loader和plugins里面用到它们结合在一起可以把css样式文件打包成一个css静态资源文件通过link标签引入进html文档中。在webpack4中打包压缩JS和CSS都可以在optimization这个对象里进行。如果不写minimize则mode为production时webpack会自动开启uglifyjs的操作。倘若写了minimize里面却不配置uglifyjs则这个自动的操作会被取消。它们分别会让你的js和css文件打包压缩成如下另外webpack最显著的特点这也是webpack创始人打造它的初衷就是code splitting既然如此我们当然要发挥webpack这个特点帮助我们优化注意哦代码分割是内置在webpack里面的方法。在webpack4中它在optimization里面配置也就是取代了之前的commonsChunkPlugin这个插件。如下另外runtimeChunk用来单独打包压缩运行时的webpack代码。至此经过npm run build之后代码执行的入口文件为以下四个再让我们来分析一下打包后的文件大小总之我打包后vendor变得很大即便uglify了也有188k。这可不行这时候请记住plugin: compression-webpack-plugin。然后如下图在plugins里面创建一个它的实例这样一来打包后你生成的文件就会包含一个vendor.bundle.js.gz二进制格式的压缩文件。如下图很开熏是不是但是我们打包后dist/index.html中引用的是vendor.bundle.js并不是这个.gz的压缩文件怎么办这时候就需要后端配合修改一下nginx的配置增加gzip_static on。仅仅有gzip on是不行滴。然后你再打开页面就会发现vendor.bundle.js变成了63.4k。虽然还没有达到我的要求但是已经缩水一半以上了补充说一下webpack4“动态引入”的不同如果要用import().then()这个动态引入方法需要安装babel-plugin-dynamic-import-webpack这个插件才行。总结一下webpack的复杂性总体来讲就是要记得东西很多有点“无厘头没规律”具体来说至少包含以下几个方面有些功能用loader就完事了可有些还要配合着plugins去写。有些loader本身要配置plugins有些loader需要到外面大plugins对象里进行设置。没有统一的规律遵循比较杂乱不同loader和plugins配置项可以很多不同版本也不一样(希望以后版本更迭的成本小一些给开发者多一些温油)像babel这样的要注意不同版本的差别否则会报错。babel-loader, babel-core, babel-preset, babel-polyfill一定要对应着来。并且用了babel-loader并不久完事了要去设置对应的presets告诉babel要把你的es6编译成啥样的规范可以写在options里也可以在根目录设置.babelrc。另外要编译es方法和函数还要用到polyfill如果是开发框架则要用另一个babel-plugin--transform-runtime --save-dev和babel-runtime --save。总之要记的很多就是了。。。链接文章https://segmentfault.com/a/1190000015725670
