webpack v4从开发到珠江三角洲的方法

　　

　　

本月迎来了v4正式版的发布,本文用于学习新特性和总结开发必用的插件,加载程序,从开发到珠三角,走你~

　　

　　

环境 　　

节点。js 4是不再支持。源代码是升级到更高的ecmascript版本。

　　使用

　　

你必须选择(模式或模式)之间的两种模式:生产或开发

　　

本次新版本中引入了模式配置项,开发者可在没有,发展(开发)以及生产(产品)三种模式间选择。该配置项缺省情况下默认使用生产模式。

　　
    　　<李>开发模式给你极致的开发体验,包含浏览器调试相关工具,极快的增量编译,丰富全面的报错信息… 　　<李>生产模式则包含大量发版优化,代码压缩,丝般润滑的运行时优化,开发相关代码的排除,易用,等。 　　<李>无一不使用预设,等于老版本中全部自己配置的原始状态。 　　
　　

,
　　

　　 　　 　　以前webpack——模式发展 　　 　　使用

　　
    　　<李>一些插件选项现在验证李 　　<李> CLI已经搬到webpack-cli,您需要安装webpack-cli使用CLI李 　　<李> ProgressPlugin(进步)现在显示插件名称 　　<李>至少对插件迁移到新的插件系统 　　
　　

新版中将webpack命令行工具拆分到单独的仓库中,所以需要额外安装webpack-cli。

　　 　　 　　npm init - y//初始化项目 　　npm安装webpack webpack-cli - d//安装webpack webpack-cli依赖 　　npx webpack——模式开发//npx可以直接运行node_modules/１竽柯枷旅娴拿?/pre> 　　 　　

或者通过配置包。json的脚本构建
　　

　　 　　 　　"脚本":{ 　　“构建”:“webpack——发展”模式, 　　}， 　　之前 　　 　　

　　使用

　　 　　 　　模块:{ 　　规则:[ 　　{ 　　测试:/\ . css/美元, 　　使用:[' style-loader ', ' css-loader '] 　　} 　　] 　　} 　　之前 　　 　　

css-loader用来解析处理CSS文件中url的路径,要把CSS文件变成一个模块
　　

　　

多个加载器是有顺序要求的,从右往左写,因为转换的时候是从右往左转换
　　

　　

此插件先用css-loader处理一下css文件,再用style-loader把css文件变成风格标签插入头中

　　

加载程序 　　 　　 　　模块:{ 　　规则:[ 　　{ 　　测试:/\ . css/美元, 　　装载机:[“style-loader”、“css-loader”] 　　}， 　　] 　　} 　　 　　之前 　　 　　

使用+装载机 　　 　　 　　模块:{ 　　规则:[ 　　{ 　　测试:/\ . css/美元, 　　用途:[ 　　{装载机:“style-loader”}, 　　{ 　　装载机:“css-loader”, 　　选择:{sourceMap:真} 　　} 　　] 　　} 　　] 　　} 　　 　　之前 　　 　　

这三种装载机的写法,最后打包的结果相同

　　

加载器中选择的配置项可以用“& # 63;”跟在加载器后面
　　

　　

,
　　

　　 　　 　　{ 　　测试:/\ jpeg/美元。 　　使用:“url-loader& # 63;限制=1024,name=(路径)[名字]。[ext], outputPath=img/, publicPath=输出/', 　　} 　　之前 　　 　　

为以下配置的简写
　　

　　 　　 　　{ 　　测试:/\ jpeg/美元。 　　用途:{ 　　装载机:“url-loader”, 　　选择:{ 　　限制:1024 　　名字(路径):[名字]。[ext], 　　outputPath: img/publicPath:输出/} 　　} 　　} 　　 　　

　　
    　　<李> css-loader李 　　<李> babel-loader李 　　
　　

讲ES6代码转换为ES5

　　 　　 　　{ 　　测试:\ . js/, 　　用途:{ 　　装载机:“babel-loader”, 　　查询:{ 　　预设:[“env”、“0阶段”,“反应”) 　　} 　　} 　　}, 　　 　　

babel-loader的预设可以添加在查询中,也可以在项目根目录添加.babelrc文件
　　

　　 　　 　　.babelrc 　　{ 　　“预设”:( 　　“env”, 　　“0阶段”, 　　“反应” 　　] 　　} 　　之前 　　 　　

html-webpack-plugin 　　

插件的基本作用就是生成html文件。原理很简单:

　　

将webpack中加入配置的相关入口thunk 和,extract-text-webpack-plugin抽取的css样式,,插入到该插件提供的模板或者templateContent配置项指定的内容基础上生成一个html文件,具体插入方式是将样式链接插入到头部元素中,脚本插入到头部或者身体中。

webpack v4从开发到珠江三角洲的方法