webpack 4, vue-loader 15, et al #1369
Conversation
|
Thanks for taking the time to do this. |
|
I'm trying to get the build to pass. I noticed that the chromedriver being used for the e2e tests is 2.35, which is apparently installed by the image in /usr/bin/chromedriver. It should be using 2.38, which is specified in package.json and located in node_modules. The Dockerfile used for the build tries to install the latest chromedriver, which should be 2.38, but either the script isn't working properly, some cache (maybe CircleCI's?) is returning the older version, or the chromedriver is preinstalled and the script is failing to overwrite it. I'm trying to configure a build that is identical to the current build, except that it does not try to install the global chromedriver, by commenting out just the chromedriver installation command. Turns out it's pretty complicated to get that set up and running. I'm working on it, but if anybody knows a faster way to get CircleCI to use a slightly different Dockerfile, I would be obliged :). |
…d circleci to collect them from there.
|
Hi! |
|
@Garito every single feature of this template is already included in vue-cli 3. And if you do a quick search on npmjs.com, you will find that there are already dozens of plugins available for it, including things like vuetify, i18n, Apollo graphql etc. pp. |
|
I know but there's always something to do |
|
As much as I applaud and like projects such as the Vue CLI, there is always room for options. I my case, we have taken the approach of iterating much of our UI forms from PHP to more API based and all new UI work is JS (we have used Angular, React and Vue) |
| vendor: { | ||
| name: 'vendor', | ||
| test: /[\\/]node_modules[\\/]/, | ||
| enforce: true, |
There was a problem hiding this comment.
I can't find any documentation on this enforce option?
https://webpack.js.org/plugins/split-chunks-plugin/#splitchunks-cachegroups
There was a problem hiding this comment.
@zevdg Quoting @thatisuday (webpack/webpack#6647 (comment)):
enforcewill force modules to split whether or not condition mentioned insplitChunkssuitable to modules to split.
If I recall correctly, I added it to ensure consistent hashing, but I really don't remember the details and, in hindsight, that probably doesn't make much sense :(. I do remember that it took me way too long to solve whatever the problem was because, as you said, there was no documentation for enforce so I didn't know the option existed until I came across it by accident on some unrelated article.
The SplitChunksPlugin code basically uses it to arbitrarily set other parameters to default values that guarantee that the chunk will be created.
|
@LinusBorg I know that vue-cli has a lot of configuration items, but how can vue-cli ensure that my project public files can exist every time I create them? I need to use some configuration of the meta files in the template to decide whether to use some plugins and file |
| @@ -65,7 +64,11 @@ const devWebpackConfig = merge(baseWebpackConfig, { | |||
| ignore: ['.*'] | |||
| } | |||
| ]) | |||
| ] | |||
| ], | |||
| optimization: { | |||
There was a problem hiding this comment.
This is not necessary. In the mode: 'development' is the default configuration.
There was a problem hiding this comment.
You're right about namedModules. I'm removing it.
However, the docs for noEmitOnErrors seem to indicate that it does not have a default value, so I'm leaving it for now.
| chunksSortMode: 'dependency' | ||
| }), | ||
| // keep module.id stable when vendor modules does not change | ||
| new webpack.NamedChunksPlugin(), |
There was a problem hiding this comment.
https://webpack.js.org/guides/caching/#module-identifiers
HashedModuleIdsPlugin is enough
There was a problem hiding this comment.
@PanJiaChen Thanks for the thorough review!
I did a lot of experimentation before I added the NamedChunksPlugin because the HashedModuleIdsPlugin did not guarantee consistent hashing, especially of the vendor module.
I found that almost every change I made to any import statement in my code could cause the vendor module hash to change. The NamedChunksPlugin uses the path instead of the arbitrary module id to calculate the hash, and this proved to be far more consistent.
It's definitely possible I missed something, or that the behavior improved since webpack 4.6 (it's now 4.16), but I hesitate to reopen this right now as changing this or upgrading to 4.16 might have further consequences. In any case, after this PR is approved, doing that kind of change is a much smaller and far more focused change.
template/build/webpack.prod.conf.js
Outdated
| ] | ||
| ], | ||
| optimization: { | ||
| concatenateModules: true, |
There was a problem hiding this comment.
In mode: 'production', it default enable.
| // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 | ||
| allChunks: true, | ||
| new MiniCssExtractPlugin({ | ||
| filename: utils.assetsPath('css/[name].[chunkhash].css'), |
There was a problem hiding this comment.
Better with contenthash.
|
well....will it be merged soon? or it still has some problems to do? |
| }, | ||
| runtimeChunk: 'single', | ||
| minimizer: [ | ||
| new UglifyJsPlugin({ |
There was a problem hiding this comment.
Is this needed since you are already using mode: production?
According to the docs, they have removed UglifyJsPlugin.
|
Hi @LinusBorg , what is the status of this? It does looks good to merge now. |
|
Any update here, would really like to updgrade to webpack4! Thanks for this PR! |
|
I think it is easier and safer to migrate directly to vue-cli@3 than to upgrade from this template to webpack4 now. |
|
Old projects might still need this |
|
@PanJiaChen i've been migrating my project to vue-cli@3 and it's amazing! so i actually don't need this anymore |
|
some of deps still using beta package, I would take time for updating these packages. and I would say in some case, like desktop app development, this template is still a good start. |
|
is where any progress on it, like to have mörged it, thanks |
|
This PR is great, but Webpack 5 is imminent and I am not sure if this will come effective by then. Also, |
I spent a bit more time to update to Webpack 4. I hope it's finished now... References: - vuejs-templates/webpack#1280 - vuejs-templates/webpack#1369
I spent a bit more time to update to Webpack 4. I hope it's finished now... References: - vuejs-templates/webpack#1280 - vuejs-templates/webpack#1369
This PR includes the following:
webpackupdated to 4.6.0vue-loaderupdated to 15.0.3karma,mocha,sinon-chai,babel, variouseslintandwebpackplugins and loaders, and othersextract-text-webpack-pluginreplaced withmini-css-extract-pluginWhen upgrading
vue-loader, I followed the migration guide. The notable exception is that I did not add CSS modules because that would require a bit of a rewrite of how the webpack rules are generated inutils, and CSS modules aren't supported yet by the template anyway, as far as I can tell.Vue is kind of new for me, so I'm not sure how to verify that everything works correctly. Things seem to be working well enough for me :). The options I use are: standalone, with vue-router, eslint, and unit tests, the Standard esline preset, karma and mocha, Nightwatch, and npm. I've run all the npm scripts and they all seem to be doing their jobs.
#1280
#1367