webpack
文章平均质量分 92
_葱
这个作者很懒,什么都没留下…
展开
-
webpack 相关概念梳理
资源(Asset):用于图片,字体,媒体,其他类型的文件等。这些文件通常在output中输出为单个文件。bundle: 由多个不同的模块生成,bundle包含了加载和编译过后的最终源文件版本。bundle分离(Bundle Splitting):优化构建的方法。允许webpack为应用程序生成多个bundle。当其他某些bundle改动时,彼此独立的另一些bundle不受影响。减少需要重新...原创 2018-11-21 17:31:01 · 516 阅读 · 0 评论 -
webpack 打包后的bundle分析
webpack打包后的bundle文件:app.bundle.js里面其实就是个立即执行函数,类似如下结构:(function (modules){ console.log(modules['app'])})({ 'app': function(){ return 20 }, 'test': function(){ re...原创 2018-11-21 17:48:56 · 4332 阅读 · 0 评论 -
webpack entry & context
context 是webpack entry的上下文,是入口文件所处的目录的绝对路径。默认情况下,只想过当前项目根目录。新建demo目录如下:运行npx webpack --config ./build/webpack.config.js。控制台打印如下:可见,如果我们不设置context的值,context默认的值就是项目的根目录,即:/Users/lizuncong/Docum...原创 2018-11-21 21:06:42 · 5978 阅读 · 0 评论 -
webpack output.publicPath
这篇文章用例子讲解我在webpack的学习过程中遇到的publicPath问题。对于按需加载(on-demand-load)或加载外部资源(external resources)(如图片、文件等)来说,output.publicPath 是很重要的选项。如果指定了一个错误的值,则在加载这些资源时会收到 404 错误。创建项目目录如下:index.js:import './css/...原创 2018-11-22 14:08:44 · 4853 阅读 · 7 评论 -
webpack CleanWebpackPlugin
clean-webpack-plugin能够帮助我们清空指定目录下的内容。默认情况下,只能清空webpack配置文件所在目录里面的内容。如果要清空外面的内容,需要设置allowExternal = true。如下:new CleanWebpackPlugin(['../dist'], { root: __dirname, allowExternal: true })相当于告诉webpac...原创 2018-11-22 21:05:57 · 1274 阅读 · 0 评论 -
webpack3到webpack4的变化
1.mode。webpack4中通过内置的mode使用相应模式的内置优化。设置mode等于'development',会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。设置mode等于'production',会将 process.env.NODE_ENV 的值设为 producti...原创 2018-11-29 16:43:35 · 1838 阅读 · 0 评论