Webpack4 кэширование и разделение кода поставщика - PullRequest
Новая
       81

Webpack4 кэширование и разделение кода поставщика

0 голосов
/ 16 апреля 2020

Я только начинаю с Webpack4 и пробую основную c комплектацию веб-страниц. Я пытаюсь отделить все коды поставщиков от моего основного модуля (index. [Hash]. js в моем случае). Я имею в виду документацию Webpack4 по SplitChunksPlugin и добавил следующую конфигурацию basi c в мой webpack.config. js - 

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
      },
    },
  },
},

Когда в производственном режиме он все еще связывает мой node_modules с моим основным модулем, и я не создаю отдельного поставщика. [hash]. js. Однако индекс. html, сформированный в папке dist, не поврежден со всеми кодами js и css, и веб-страница загружается нормально. С другой стороны, при запуске в режиме разработки vendor. [Hash]. js в порядке. vendors.bundle.js 879 KiB vendors [emitted] vendors Но индекс. html не имеет ссылки на файлы js / css, поэтому веб-страница разрывается.

Мои модули node_modules имеют только следующие модули (мой пакет. json для справки) - 

"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2",
"extract-loader": "^5.0.1",
"file-loader": "^6.0.0",
"html-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"url-loader": "^4.0.0",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"

}

В каком случае ожидается именно такое поведение? Что мне здесь не хватает?

...