vikingmute / webpack-for-fools

webpack tutorial for fools

Hi there 👋

我叫张轩，ID 是 Viking，我是一名前端开发工程师，同时也是一名独立开发者，目前生活在上海。我有一系列的作品：

🔭 简单简历

我在 2022年8月19日 发布了独立开发的作品：简单简历，我从教学过程中发现学生们关于简历的痛点，开发一年完成的基于 Web 的应用，专注于 5 分钟快速创建程序员的金牌简历。它有如下特点：

• 多个美观的基于 Tailwind.css 的响应式模版
• 支持 URL 分享及 PDF 下载
• 真实的不同技术栈的简历范本
• 完全免费的技术简历书写指南 https://docs.easycv.cn/guide
• 强大易用的可视化编辑器

同时它也是我独立开发生涯重要的里程碑，它会是一个公开盈利，长期维护，不断迭代的项目，如果你想了解更多幕后的故事，请看：

• 项目的缘起以及诞生的故事 https://docs.easycv.cn/pages/about.html
• 项目的路线图以及更新 https://docs.easycv.cn/pages/updates.html
• (build in public) 公开记录发展的 Twitter thread

👯 我出品的课程 - 收费

我水平一般，但是在教学上有一点天赋，我在 2016 年和哥们出过一本书，从18年下半年到现在，在慕课网出品了 7 套课程，它们是我目前的主要收入来源。

• Web前端架构师2022版
• 2022全面升级！Vue3 + TS 仿知乎专栏企业级项目
• 2022升级 React18+TS高仿AntD从零到一打造组件库
• Electron+React+七牛云 实战跨平台桌面应用
• React16组件化+测试+全流程实战“在线账本”项目

我出品的课程 - 免费

• Electron开发仿网易云音乐播放器
• 基于实例的 React16 傻瓜课程

📫 联系我

• Twitter：@vikingmute
• Youtube： 程序员的乌托邦
• B站：独立开发者 Viking
• 微信公众号: 程序员乌托邦
• 知乎专栏：程序员的乌托邦

webpack-for-fools's Issues

使用webpack.ProvidePlugin时提示webpack is not defined

具体位置在Webpack开发技巧->第一种方法 使用webpack.ProvidePlugin 小节，
在webpack.config.js中配置到webpack.ProvidePlugin时应在头部添加以下一行：
var webpack = require('webpack');

npm run build时候 UglifyJs报错

ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: string (./main.scss) [./app/index.js:1,0]

貌似不能识别scss？

Webpack傻瓜式指南（一）安装babel-loader、babel-preset-es2015报错

还需要安装一个babel-core模块，不然会报如下的错误：

ERROR in ./app/index.js
Module build failed: Error: Cannot find module 'babel-core'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/uesrHome/demo/webpack/node_modules/babel-loader/lib/index.js:4:13)

博客中忘记写安装babel-core模块了。

Webpack中多入口+webpack-dev-server

@vikingmute webpack关于多入口文件和webpack-dev-server热加载的整合找了很多地方，并没有相关是示例，请问有相关的demo吗？

安装webpack-dev-server之后运行，总是提示找不到webpack/hot/dev-server

我是按照第一篇教程一步一步进行的，安装了全局的webpack，和全局的webpack-dev-server，然后在package.json里添加了scripts：start: webpack-dev-server --hot --line，运行npm start，就是报错，页面也出不来。

ERROR in multi main
Module not found: Error: Cannot resolve module 'webpack/hot/dev-server' in D:\My
Web\webpack
 @ multi main
webpack: bundle is now VALID.

解析sass文件问题

照着例子做，到sass那里总是报错，原来要安装sass-loader 和 node-sass，才能解析.scss文件
npm install sass-loader node-sass --save-dev

局部热更新，组建重复问题

用了npm install babel-preset-react-hmre --save-dev 后，局部热更新确实可以了，
但是每修改一次，render的内容就好重复一次。。。
假如修改了3次，界面大概是这样子的：

Search Github User testtesttest

Search Github User testtesttest

Search Github User testtesttest

debug章节中 初学webpack遇到的坑 的链接跳转404.

求更新 :)

这样纸，就能实现hot-loader? 无须加

这样纸就可以：
{
test: /.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}

无须这样：
{ test:/\.jsx?$/, loaders:['react-hot', 'babel?presets[]=es2015&presets[]=react'], include:APP_PATH }

星期一想说的，一时找不到之前的配置了。
刚刚看了一眼，发现版主已经更新了。

scss里背景图片超出url-loader设置的限制没办法显示是什么原因啊

没一个让人省心的，一大堆报错

0 info it worked if it ends with ok
1 verbose cli [ 'E:\NODE\node.exe',
1 verbose cli 'E:\NODE\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info predev [email protected]
6 info dev [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec dev script
9 verbose stack Error: [email protected] dev: webpack-dev-server
9 verbose stack Exit status 1
9 verbose stack at EventEmitter. (E:\NODE\node_modules\npm\lib\utils\lifecycle.js:217:16)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at EventEmitter.emit (events.js:172:7)
9 verbose stack at ChildProcess. (E:\NODE\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at ChildProcess.emit (events.js:172:7)
9 verbose stack at maybeClose (internal/child_process.js:827:16)
9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid [email protected]
11 verbose cwd D:\Program Files (x86)\XAMPP\htdocs\webpack\webpack-react-kit
12 error Windows_NT 10.0.10586
13 error argv "E:\NODE\node.exe" "E:\NODE\node_modules\npm\bin\npm-cli.js" "run" "dev"
14 error node v4.4.3
15 error npm v2.15.1
16 error code ELIFECYCLE
17 error [email protected] dev: webpack-dev-server
17 error Exit status 1
18 error Failed at the [email protected] dev script 'webpack-dev-server '.
18 error This is most likely a problem with the webpack-react-kit package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error webpack-dev-server
18 error You can get information on how to open an issue for this project with:
18 error npm bugs webpack-react-kit
18 error Or if that isn't available, you can get their info via:
18 error
18 error npm owner ls webpack-react-kit
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

对于新手来说真是痛苦，也不知道哪里有问题

source-map的用法

https://github.com/vikingmute/webpack-for-fools/blob/master/entries/chapter-2.md 这里配置了查看sourcemap的选项，可是样式文件不是被打入页面了么，怎么查看.map文件啊

perLoaders写错了

perLoaders => preLoaders

readme里面链接问题

一篇链接404，一篇链接重复

[chapter-3] It should be <App /> instead of <app />

ReactDOM.render(<app />, app);
should be
ReactDOM.render(<App />, app);

CommonsChunkPlugin生成的vendor无用

我用CommonsChunkPlugin合成vue,vue-resource，成功生成了vendor并且导入到了html里，但是用vue还是报vue不存在。

entry: { index: './src/js/page/index.js', vendor: ['./src/js/lib/vue.js','./src/js/lib/vue-resource.js'] },

plugins: [ // new webpack.ProvidePlugin({ //加载jq // $: 'jquery' // }), new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.bundle.js'), //HtmlWebpackPlugin，模板生成相关的配置，每个对于一个页面的配置，有几个写几个 new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML filename: './views/index.html', //生成的html存放路径，相对于path template: './src/views/index.html', //html模板路径 inject: 'body', //js插入的位置，true/'head'/'body'/false hash: true, //为静态资源生成hash值 chunks: ['index'],//需要引入的chunk，不配置就会引入所有页面的资源 minify: { //压缩HTML文件 removeComments: true, //移除HTML中的注释 collapseWhitespace: false //删除空白符与换行符 } }) ],

组件热更新后会重复出现，怎么解决

HtmlwebpackPlugin这个配置里面的疑问。

 new HtmlwebpackPlugin({
    title: 'Hello Mobile app',
    template: path.resolve(TEM_PATH, 'mobile.html'),
    filename: 'mobile.html',
    chunks: ['app', 'vendors'],
    inject: 'body'
  })

这里的chunks我感觉应该是['mobeil', 'vendors']才对啊。