Webpack入门demo代码分享

参考文章:入门Webpack,看这篇就够了

年前看到过这篇文章,写的超级棒。过了短短几个月又忘得差不多了,昨晚又看了一遍,加上最近又看了一本react的书。就特别手痒,想动手敲代码了。纸上得来终觉浅,于是趁工作不忙,把这篇文章里的配置按小节一一实践,循序渐进的完成整个配置,全程都很顺畅,没遇到太多坑,感谢作者写的这么详细和准确。每一个小节,知识点我都做了一次提交,这样每次添加的功能就很清晰了。

git提交历史如下图:

demo code:请到这查看或下载

使用webpack4会遇到的一些问题如下:

1."extract-text-webpack-plugin"这个插件需要使用4.0以上版本的:"^4.0.0-beta.0",

可运行这条命令升级:npm i -D extract-text-webpack-plugin@next

2. webpack.optimize.UglifyJsPlugin 插件问题

在webpack4下执行npm run build会遇到如下错误

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

解决:在webpack.production.config.js加入下面的设置


const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

在plugins:设置前添加以下设置,具体可见my gitbub

    optimization: {

        minimize: true, // default is true if it is not set

        minimizer: [

            new UglifyJsPlugin({

              cache: true,

              parallel: true,

              sourceMap: true

            })

        ]

    }

   希望这些code对你们有帮助。谢谢!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,714评论 25 709
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,721评论 7 110
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,330评论 4 31
  • 如有好文, 请到此issue里提交文章,或者直接发pull request. 🎓webpack入门 📕webpac...
    Creoa阅读 2,242评论 0 30