Question

即时通讯使Wordpress主题具有反应性，我创建了我的配置和内容，无论我尝试多少，都只有一件事不起作用-图像。

我的问题是图像未正确链接。现在，我正在使用将所有图像解析为base64的url-loader，但这并不是最佳选择。我正在寻找允许webpack将图像包正确链接到/ public的配置。

我的设置如下：

theme_folder（编码）
- 资产（dev文件夹）
  - 图片
  - js（所有javascript文件）
  - scss（所有样式）
- 公共（构建）
- 诸如index.php，header.php之类的东西，主题加载所需的所有东西，还有webpack，gulp配置

我的配置

gulpfile：

var gulp          = require('gulp');
var sass          = require('gulp-sass');
var watch         = require('gulp-watch');
var browserSync   = require('browser-sync');
var csso          = require('gulp-csso');
var postcss       = require('gulp-postcss');
var autoprefixer  = require('autoprefixer');
var webpack       = require('webpack');
var webpackStream = require('webpack-stream-fixed');

function swallowError (error) {
    //Prints details of the error in the console
    console.log(error.toString());
    this.emit('end')
}

gulp.task('sass', function() {
    gulp.src('./assets/scss/app/app.scss')
        .pipe(sass())
        .on('error', swallowError)
        .pipe(postcss([ autoprefixer() ]))
        .pipe(gulp.dest('./public/css'))
        //For auto injecting the CSS into the browser. 
        .pipe(browserSync.stream({match: '**/*.css'}));
});

gulp.task('sass-vendor', function() {
    gulp.src('./assets/scss/vendor/vendor.scss')
        .pipe(sass())
        .pipe(gulp.dest('./public/css'))
        .pipe(browserSync.stream({match: '**/*.css'}));
});

gulp.task('webpack', function() {
return gulp.src('./assets/js/app.js')
    .pipe(webpackStream( require('./webpack.config.js'), webpack ))
    .on('error', swallowError)
    .pipe(gulp.dest('./public/js'));
});

gulp.task('production', function() {
    //Setting ENV to production so Webpack will minify JS files. 
    process.env.NODE_ENV = 'production';
    gulp.src('./assets/js/app.js')
        .pipe(webpackStream( require('./webpack.config.js'), webpack ))
        .pipe(gulp.dest('./public/js'));

    gulp.src('./public/css/app.css')
        .pipe(csso())
        .pipe(gulp.dest('./public/css'));

    gulp.src('./public/css/vendor.css')
        .pipe(csso())
        .pipe(gulp.dest('./public/css'));
});


gulp.task('watch', function () {
    //Webpack will watch the asser files. All we need is to watch the compiled files.
    gulp.watch('./public/js/*.js').on('change', browserSync.reload);
    gulp.watch(['./assets/scss/app/*.scss', './assets/src/scss/app/components/*.scss'], ['sass']);
    gulp.watch(['./assets/scss/vendor/vendor.scss'], ['sass-vendor']);
});


gulp.task('sync', function() {
    var options = {
        proxy: 'localhost/codevly/wordpress',
        port: 3000,
        files: [
            '**/*.php'
        ],
        ghostMode: {
            clicks: false,
            location: false,
            forms: false,
            scroll: false
        },
        injectChanges: true,
        logFileChanges: true,
        logLevel: 'debug',
        logPrefix: 'gulp-patterns',
        notify: true,
        reloadDelay: 0,
    };
    browserSync(options);
});

gulp.task('default', ['webpack', 'sass', 'sass-vendor', 'watch', 'sync']);

webpack.config.js

const path            = require('path');
const webpack         = require('webpack');
const UglifyJSPlugin  = require('uglifyjs-webpack-plugin');

const config = {
    mode: process.env.NODE_ENV ? process.env.NODE_ENV : 'development',
    watch: true,
    entry: {
        app: './assets/js/app.js',
        vendor: ['babel-polyfill', 'react', 'react-dom']
    },
    output: {
                filename: '[name].js',
        path: path.resolve(__dirname, 'public/js/'),
        publicPath: './public'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
            },
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i, 
                loader: "url-loader?name=app/images/[name].[ext]"
            },
        ]
    },
    optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

//If true JS files will be minified
if (process.env.NODE_ENV === 'production') {
    config.plugins.push(
        new UglifyJSPlugin({
            compress: {
                warnings: false
            }
        })
    );
    config.watch = false;
}

module.exports = config;

通过webpack加载图像无法正确链接

0 个答案: