async function getLastCommitHash() { return new Promise(resolve => { require('child_process').exec('git rev-parse HEAD', function(err, stdout) { resolve(stdout); }); } } const run = async () => { const commit = await getLastCommitHash(); return { ... plugins: new webpack.DefinePlugin({ "process.env": commit }) } } 

我参考了一下这里的做法： https://stackoverflow.com/questions/53991856/how-do-i-await-a-piece-of-code-within-weback-config

module.exports = run(); 或者
module.exports = run; 貌似都不行。

这，有没有办法，在 webpack.config.js 里面，先执行一段异步代码再返回配置呢？

当我配置了 splitChunks, chunks: all, minChunks:2 的情况下 dep.js 并没有被单独提取出来

如果 A.js 没有引入依赖 dep.js 编译后 dep.js 就能被单独提取出来，这是为啥

是 webpack 打包时，把 process.env 生成了一个文件，然后在 runtime 再把这些 variables 从文件里面读取出来了么？

我 google 了一下，找相关文档，没有找到。

读到一篇文章，提到了，webpack 如果想在引入一个包的时候，编译只引入的那部分代码，需要 babel 的支持。而且，只对自己的代码有效。如果是第三方的包，还不行，得写一个插件，实现转换。比如，

import { x } from 'module1'; 转换成 import { x } from 'module1/a/bc'; 

要这么麻烦才能够实现 tree-shaking 啊！

当然这是 3 年前的文章了，现在的 webpack 也进化到了 5.0 的版本了吧？现在还是这样的么？

(()=>{"use strict";console.log("hello")})(); 

• webpack 中的动态引入,指的是通过逻辑判断,判断模块是否加载,比如import('xxx'),但是这样 xxx 被限定住了,所谓动态,其实也是有指定范围的动态

如何实现真正的动态?

• 比如 import(变量),这个变量是从后端,或者手动输入,完全无规则(但是有这个模块,只不过不是在构建时出现的,而是后期的补充),

是否需要其他的配置配合

• 这么引入,首先要保证被引入的模块是符合 webpack 打包的,
• 然后就是 webpack 要允许这种方式(但是现在 import 都会做检查,好像没有这种方式)

不知道大佬们有没有这种技术,帮忙提个醒就行了

你真的理解 Webpack ？ 如果知道以下问题的答案，则意味着已经掌握了 Webpack。 欢迎提供您的答案。

• Chinese 一文搞定 Webpack 面试

• English

Webpack 实战

• 与 Webpack 类似的工具还有哪些
• 谈谈你为什么选择使用或放弃 webpack
• Loader 和 Plugin 的不同
• 有哪些常见的 Loader？他们能解决什么问题？
• 有哪些常见的 Plugin？他们能解决什么问题？
• 如何利用 Webpack 来优化前端性能
• 如何提高 Webpack 的构建速度?
• 如何对 bundle 体积进行监控和分析？
• 怎么配置单页应用？怎么配置多页应用？
• 如何在 Vue 和 React 项目中实现按需加载？
• monorepo 这种项目有什么好处，具体是如何打包的？
• Source Map 是什么？生产环境怎么用？
• 什么是长缓存？
• 在 Webpack 中如何做到长缓存优化？
• Webpack 中 hash chunkhash contenthash 有什么区别？

Webpack 原理

• Webpack 的构建流程是什么？
• 是否写过 Loader ?描述一下编写 Loader 的思路？
• 是否写过 Plugin ?描述一下编写 Plugin 的思路？
• inline pre post normal loader 执行先后顺序是？
• Webpack 打包的原理是什么？聊一聊 babel 和抽象语法树
• dev-server 的原理是什么？描述一下它的具体流程
• 请说一下 DIlPlugin 和 DllReferencePlugin 的工作原理
• Webpack 的热更新是如何做到的？说明其原理？
• Tree shaking了解过么？它的实现原理说一下

Webpack 5

• Webpack 5 中有哪些新特性
• Webpack 5 中的 Module Federation 对微前端的意义

define([ config, // ./config.js JApp, // ./modules/module-common/app.js ], function(config, JApp) { ... }); 

同时，我还有个 config 文件：

define([], function() { return { config: 'config', JApp: './modules/module-common/app', HApp: './modules/module-common/app.html', }; }); 

我在尝试使用 webpack 打包 main.js 时，webpack 会提示找不到模块‘JApp’，因为确实不存在嘛。 于是我就配置了一下 webpack.resolve.alias，就是直接将 config 文件的内容赋给 webpack.resolve.alias 。 但结果是仍旧报错：

Module not found: Error: Can't resolve 'JApp' in 'D:\codes\webpack\webpack-test\webapp\static' @ ../webapp/static/main.js 13:4-227:6

我该怎么解决这个问题呢？

手段：新模块单独起个工程，采用 vue 开发。在老系统新增一个菜单 /目录，新模块编译好将文件放置老系统对应目录，然后老系统向以前一样随后端一期打包部署。

问题：如何打包 vue 工程，编译好又如何嵌入老系统?

否定方案：新系统单独部署一套环境，然后用 frame 弄个窗口。这种方案被否定了，因为需要新部署环境！

项目及 webpack.config.js 在这里（ Github ）。

想学习 webpack 工程化和 vue 单文件组件开发的新手可以看看

来源:

• Vue.js 实战之工程篇,使用和此教程一致的范例
• 每一步一个提交,可以看 git 历史来学习和本地验证测试

内容:

• 从无到有建立一个 webpack 项目
• 安装 webpack 及相关的一系列 npm 模块和工具
• 使用 webpack-dev-server 作为调试服务器
• 最简单的 webpack 项目
• webpack build
• 编译 css
• 使用 ExtractTextPlugin 合并 css
• vue 单文件组件的支持
• 对于图片文件的编译支持
• 生产环境方式的 build

先执行 npm run dist 生成了 dist 文件夹，

然后想通过 npm run dev 查看 example 中的效果，

结果 css 死活找不到，index.html 中的 css 指向自己修改过，

应该是和 webpack-dev-server 的配置有关的吧？

前端小菜前来请大佬们帮我指导一下。 不胜感激。

引申问题，如果是 webpack-dev-server 里的 js 因为是在内存中是不是更无法 debug 打断点了？

问题二 firefox 升级到 53 后，redux-devtools-extension 无法调出是不是普遍现象？根本找不到那个轮回眼的 icon 了，是不是因为开启了 firefox 的智能搜索提示呢？

谢谢大家

结构如下

怎么能在 main.scss import 相对路径 的 scss 文件？

@import 'font-awesome/font-awesome.scss'; 一旦写进去， webpack devserver 就开始报错了， 只有放到 index.js 里 import 才行

so 上也有类似问题 http://stackoverflow.com/questions/33649761/how-do-i-load-font-awesome-using-scss-sass-in-webpack-using-relative-paths

没有解决办法

webpack 配置：

const path = require('path'); const webpack = require('webpack'); module.exports = { devtool: 'cheap-module-eval-source-map', entry: [ 'eventsource-polyfill', // necessary for hot reloading with IE 'webpack-hot-middleware/client', './src/index' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/static/' }, plugins: [ /** * This is where the magic happens! You need this to enable Hot Module Replacement! */ new webpack.HotModuleReplacementPlugin(), /** * NoErrorsPlugin prevents your webpack CLI from exiting with an error code if * there are errors during compiling - essentially, assets that include errors * will not be emitted. If you want your webpack to 'fail', you need to check out * the bail option. */ new webpack.NoErrorsPlugin(), /** * DefinePlugin allows us to define free variables, in any webpack build, you can * use it to create separate builds with debug logging or adding global constants! * Here, we use it to specify a development build. */ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') }), ], module: { loaders: [ { test: /\.js?/, exclude: [/node_modules/, /styles/], loaders: ['babel'], include: path.join(__dirname, 'src') }, { test: /\.scss$/, loader: 'style!css!sass' }, { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' } ] } }; 

我只懂基本的webpack配置， 尝试了下改 entry 和output 都没啥用。。。

现在有个困惑，怎样调试 webpack 打包好的代码？ webpack 打包好的 bundle.js ，一脸茫然，根本看不懂，更加不用说调试。

不知大神有没有比较好的建议。指点指点一下小弟

我的 webpack 配置

var webpack = require("webpack"); var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: { app: "./entry.js", vendor: ['bootstrap'], }, output: { path: __dirname + "/dist", filename: "bundle.js" }, module: { loaders: [ { test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")}, { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, ] }, plugins: [ new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"), new ExtractTextPlugin("[name].bundle.css", {allChunks: false}), ] }; 

能生成 vendor.bundle.js 文件,且文件内容包含 bootstrap . 但没有生成 vendor.bundle.css 文件. 是 extract-text-webpack-plugin 不支持吗?

想到一种比较笨的办法,就是再建一个 css_entry.js 文件, 在文件里面调用 require('./node_modules/bootstrap/less/bootstrap.less') ,但感觉这个办法有点搓...

有什么更好解决方案的朋友吗?

问题 1 ： webpack 既然和 browserify 是一个类型的，当然，强大了许多，居然可以把 css 也当做了 compile to js 来使用。 gulp 也有很多插件完成 coffee script 或者 es6 到 js 的过程。为何这个轮子造出来了。难道是为了统一 AMD 和 commonjs 不同 module loading 问题？

问题 2 ： learning curve 有点陡啊，不像 gulp 一上午就知道怎么用了。 小项目使用是不是有点过？

愚见，喷吧，反正也是学习。