资讯专栏INFORMATION COLUMN

webpack实践笔记(三)--- 总结

tunny / 2268人阅读

摘要:实践笔记三总结需要多带带安装并且在文件中的下进行配置,配置参数有匹配处理的文件的拓展名的正则表达式必须的名称必须,一般以的方式命名,代表了这个要做的转换功能,比如。允许你在修改组件代码后,自动刷新实时预览修改后的效果。

webpack实践笔记(三)--- 总结 loaders
需要多带带安装并且在config文件中的modules下进行配置,配置参数有:

test:匹配loaders处理的文件的拓展名的正则表达式(必须)

loader:loader的名称(必须),loader 一般以 xxx-loader 的方式命名,xxx 代表了这个 loader 要做的转换功能,比如 css-loader。

include:必须处理的文件(文件夹)(可选)

exclude: 屏蔽不需要处理的文件(文件夹)(可选)

query:为loaders提供额外的设置选项(可选)

css-loader 和 style-loader区别

css-loader实现读取功能

style-loader将所有的计算后的样式加入页面中

二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中

...
{
    test: /.css$/,
    exclude: /node_modules/,
    loader: "style-loader!css-loader"
}
// 感叹号的作用在于使同一文件能够使用不同类型的loader
...    
plugins

loaders和plugins是完全不同的东西,loaders是在打包构建过程中用来处理源文件的(js,scss,less..),一次处理一个,
插件并不直接操作单个文件,它直接对整个构建过程其作用。

HtmlWebpackPlugin

依据一个简单的模板,生成最终的html文件,这个文件中自动引用了你打包后的js文件。
每次编译都在文件名中插入一个不同的哈希值。

HMR

Hot Module Replacement允许你在修改组件代码后,自动刷新实时预览修改后的效果。
在webpack中实现HMR也很简单,只需要做两项配置:

在webpack配置文件中添加HMR插件

在Webpack Dev Server中添加“hot”参数

devServer: {
    hot: true,
    inline: true
},
plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.html"
    }),
    new webpack.HotModuleReplacementPlugin()
  ],

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80428.html

相关文章

  • 7月份前端资源分享

    摘要:更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的 更多资源请Star:https://github.com/maidishike... 文章转自:https://github.com/jsfr...

    pingan8787 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • AI开发书籍分享

    摘要:编程书籍的整理和收集最近一直在学习深度学习和机器学习的东西,发现深入地去学习就需要不断的去提高自己算法和高数的能力然后也找了很多的书和文章,随着不断的学习,也整理了下自己的学习笔记准备分享出来给大家后续的文章和总结会继续分享,先分享一部分的 编程书籍的整理和收集 最近一直在学习deep learning深度学习和机器学习的东西,发现深入地去学习就需要不断的去提高自己算法和高数的能力然后...

    huayeluoliuhen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<