search

ruanyf / webpack-demos

a collection of simple demos of Webpack
9.59k stars 2.24k forks source link

webpack 抽离共用文件？ #67

Closed wxungang closed 7 years ago

wxungang commented 7 years ago

需求： 在gulp或者grunt打包中： 1、共用库抽离：zepto、util.js、module.js(自行封装的业务模块等);当然还有common.css（实际开发中使用less编写）。一般我会抽离成库文件base.js、模块工具类util.js和common.css。 2、页面文件：page.js和page.css。

问题：

声明：使用vue2+vuex+vue-router2+ES6+LESS(SASS)+webpack2

1、我使用了vue-router2的路由懒加载。所以会对每一个页面生成一个chunk.js。（里面会包含当前页面css和js代码。当然还有import导入的工具类和模块代码，虽然这不是我想要的。）

2、JS:我目前已经使用CommonsChunkPlugin实现了第三方插件的抽离（主要是采用在app.js入口文件中导入解决）。但自行封装的ajax业务逻辑和util等，即通过具体页面import moduleobj from module 使用的模块代码在每一个chunk.js中有存在。可能有人说设置option.children=true;这样会把太多非共用封装的模块代码都打包到共用文件去了。说了这么多，我只是感觉webpack没法想gulp或者grunt那样对每一个文件包括文件的内容进行精细化的控制。

3、CSS:目前我共用的common样式采用less编写。通过在入口页面import可以实现。但问题是iconfont图标库必须通过gulp转移到build目录。直接common.less中去引用iconfont.css会报错!同时页面自身的css目前都在chunk.js中。有人可能使用ExtractTextPlugin进行抽离。但还是不够精细。我想应该每个页面抽离初一个样式文件page.css。然后一个公用的common.css。

一句话：就是怎么抽离共用的文件（共用插件库、业务模块库、页面逻辑、共用样式、页面样式）

当然很可能也是我对webpack还不熟悉，没法精细化控制。

ruanyf commented 7 years ago

我一般就用 CommonsChunkPlugin 抽离共用模块，不再做进一步优化了。