業務の効率化
- プロジェクトはマルチエントリー構成の場合は、ローカルの開発段階では、すべてのたびに実行する必要はありません。
- あなたは、コマンドラインパラメータを実行するために取得することができ、速度を実行するページを決定
- このパッケージNPMは、コマンドラインパラメータが渡されるprocess.env.npm_config_argvまたは使用yargs
|
|
|
|
- process.env.npm_config_argv:在使用yarn run xxx的时候不能获取到参数,在使用npm run xxx的时候可以获取到
- yargs这个包是都可以获取到的
路径问题
- 问题描述:在上线和测试环境下代码发到cdn上,静态资源和页面地址不在一处,需要配置不同的前缀地址,才能引入线上script
- 通过output -> publicPath 根据不同的环境变量变更path路径,解决加载问题
|
|
htmlPlugin
普通配置
|
|
- 把html 连接到webpack的plugin属性上(concat)一个配置只能针对一个文件
- data的内容,可以在template里获取到然后做相应的改动
- filename:输出html的名称,可以带路径
- template: 模板名称及使用什么编译器 ejs-compiled可以使用ejs语法
- inject:是否把所有静态资源自动添加到html里,这里不使用,目前的模板配置是直接引入了入口的文件,后面在回调里添加hash实现,下图是模板文件:
|
|
- 可以使用ejs的语法
- minify:压缩模板配置
- removeComments:删除注释
- collapseWhitespace:删除多余的空格
- preserveLineBreaks:保留每个标签tag的换行符
- collapseInlineTagWhitespace:不保留行内元素两边的空格
- collapseBooleanAttributes:使input的一些的布尔值的属性合并,不写等于了,例如:disabled
- removeRedundantAttributes:删除多余的标签,例如没有赋值的style,class等
- useShortDoctype:替换成较短的html5 doctype
- caseSensitive:区分大小写的方式处理自定义标签
- minifyJS:行内scripts标签,或者attribute里的是否压缩
- minifyCSS:行内style标签,或者attribute里的是否压缩
- quoteCharacter:对于attribute用什么符号
plugin完成后的一些操作
|
|
- plugin执行完后执行替换html的js引用,增加对应的hash值,stats.hash
- 获取到数据流后通过正则匹配,替换
参考文档:
http://perfectionkills.com/experimenting-with-html-minifier/#collapse_whitespace
http://perfectionkills.com/experimenting-with-html-minifier/#remove_comments
http://perfectionkills.com/experimenting-with-html-minifier/#collapse_boolean_attributes
http://perfectionkills.com/experimenting-with-html-minifier/#use_short_doctype
https://github.com/kangax/html-minifier#options-quick-reference
https://github.com/jantimon/html-webpack-plugin
sass-loader
设置import相对路径,不过最后引用的时候用~开头,node_modules里的scss引用可以直接相对”~”引用
https://github.com/webpack-contrib/sass-loader#imports
resolve
|
|
- extensions:扩展名
- fallback:
- alias:别名,具体定义一个别名的路径,方便引入modules
webpack2把root,fallback迁移到了modules的配置里,告诉webpack解析的搜索路径
Explicit is better than implicit
alias清晰的比modules的好,效率??
配置代理
- 背景:本地开发嵌套iframe的页面的时候,两个项目的端口号不统一,导致iframe同源策略不允许互相操作跳转
- 解决:配置到同一端口号的域名上。“devServer.proxy”
|
|
注意点
- 路径是否正确,publicPath,path,如果是相对路径相对哪里,最好配置成path.resolve(__dirname, xxx)的形式
- あなたが他の誰かはるかに優れたコンフィギュレーションファイルを使用している場合は、重複ローダー、発生する可能性のある問題の複数の反復のローダー設定をチェックし、等しいモジュールは二回解析し、文句を言うでしょう
- スプリットモジュールの場合は、あなたがpublicPath、非同期的にロードされたアドレスを決定するモジュールを設定する必要があります
オリジナル:ビッグボックス のWebPACKはピットを強化しました