#vue.js #webpack
Вопрос:
Я использую webpack 2 для проекта, и несколько дней назад я обновился до версии 5.6. 2-3 часа и компиляция проекта в порядке, но у меня только одна проблема.
Все статические файлы (изображения, шрифты) Я храню в папке /static/.
Файл CSS:
.link-yellow{ background-image: url("/static/wifi2.png"); } .link-red{ background-image: url("/static/wifi4.png"); } .link-grey{ background-image: url("/static/wifi3.png"); } Webpack 2 после компиляции файла пакета JS не трогайте url(...) ссылки css, но webpack 5 копирует файлы в папку /build/ , и, наконец, у меня есть это:
4e4b4524859364a45966.png 5b97c8a6a9b9aa05b4be.otf 7ed064d8178174fa9ce1.woff2 14d3902c59ccd98328c8.png 440e51cee01b3e78fed5.png 664550a92a1dbb39a80a.png build.js И это записывает (например 4e4b4524859364a45966.png ) в build.js :
...3197:function(t,e,n){"use strict";t.exports=n.p "4e4b4524859364a45966.png"}... Наращивать прогресс: 
Я пытался использовать file-loader с этими парами:
module: { rules: [ .... { test: /.(png|svg|jpg|jpeg|gif|gif|woff|woff2|eot|ttf|otf)$/, loader: 'file-loader', options:{ emitFile: false, name: '[name].[ext]' } } .... ] } but after that I have the same files in /build/ folder with texts inside like this:
export default __webpack_public_path__ "wifi2.png"; export default __webpack_public_path__ "exo2.otf"; export default __webpack_public_path__ "wifi3.png"; I moved some images files to style="..." attributes in vue files:
lt;div id="mainFooter" style="background: transparent url('/static/wifi3.png') no-repeat 0 0"gt; and webpack don’t touch this text and not generate copies of static files in /build/ folder and all works fine. It is that I need.
Full source of webpack.config.js :
var path = require('path'); var webpack = require('webpack'); const { VueLoaderPlugin } = require('vue-loader'); const TerserPlugin = require("terser-webpack-plugin"); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, mode: 'production', plugins: [ new VueLoaderPlugin() ], module: { rules: [ { test: /.styl$/, use: ['style-loader', 'css-loader', 'stylus-loader'] }, { test: /.css$/, use: ['vue-style-loader','css-loader'] }, { test: /.scss$/, use: ['vue-style-loader','css-loader','sass-loader'], }, { test: /.sass$/, use: ['vue-style-loader','css-loader','sass-loader?indentedSyntax'], }, { test: /.vue$/, loader: 'vue-loader', options: { loaders: { 'scss': [ 'vue-style-loader', 'css-loader', 'sass-loader' ], 'sass': [ 'vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax' ] } } }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.(png|svg|jpg|jpeg|gif|gif|woff|woff2|eot|ttf|otf)$/, loader: 'file-loader', options:{ emitFile: false, name: '[name].[ext]' } } ] }, resolve: { alias: { 'vue
Может быть, кто-нибудь знает, как отключить создание статических файлов в папке /build/ и оставить URL-адреса файлов в css без изменения путей?
Ответ №1:
ОБНОВЛЕНИЕ: У меня есть некоторый прогресс. Код, отключающий касание URL-адресов в файлах css, но шрифты все еще копируются:
{ test: /.css$/, use: ['vue-style-loader'] }, { test: /.css$/, loader: 'css-loader', options: { url: false, }, }, ОБНОВЛЕНИЕ 2: Готово. Добавление:
{ test: /.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i, type: "asset", } наконец, отключите создание других файлов. В настоящее время генерируется только /build/build.js файл
: 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, devServer: { historyApiFallback: true, client: { overlay: true, }, static: './' }, performance: { hints: false }, devtool: 'eval-source-map', optimization: { minimize: true, portableRecords: true, removeAvailableModules: true, minimizer: [ new TerserPlugin({ parallel: true, terserOptions: { format: { comments: false, }, }, extractComments: false }) ] } }; if (process.env.NODE_ENV === 'production') { module.exports.devtool = 'inline-nosources-cheap-source-map';//source-map module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) } Может быть, кто-нибудь знает, как отключить создание статических файлов в папке /build/ и оставить URL-адреса файлов в css без изменения путей?
Ответ №1:
ОБНОВЛЕНИЕ: У меня есть некоторый прогресс. Код, отключающий касание URL-адресов в файлах css, но шрифты все еще копируются:
ОБНОВЛЕНИЕ 2: Готово. Добавление:
наконец, отключите создание других файлов. В настоящее время генерируется только /build/build.js файл