更改文件夹结构后,Webpack / Webpack-dev-server不处理我的文件?

时间:2017-05-10 19:22:14

标签: javascript reactjs webpack-dev-server webpack-2

我目前正在更改项目的文件夹结构,但在更改文件夹结构后,我无法让webpack-dev-server处理我的样式和图像。当我将新文件夹添加到入口点时,我得到一个错误,它无法解决。

我当前的文件夹结构如下:

-App
  -src
     -client
     -shared
     -server
  -Public
     -css
     -scss
     -assets
-webpack.config.babel.js

我想要的文件夹结构如下:

-App
  -src
     -client
        -jsx files(index.jsx and component)
     -shared
     -server
     -assets
        -images 
        -stylesheets
        -fonts
        -icons
-webpack.config.babel.js

Webpack配置:

// @flow

import path from 'path'
import webpack from 'webpack'
import ExtractTextWebpackPlugin from 'extract-text-webpack-plugin'

import { WDS_PORT } from './src/shared/config'
import { isProd } from './src/shared/util'

const extractSass = new ExtractTextWebpackPlugin({
  filename: 'css/[name].bundle.css',
  disable: !isProd,
})

const config = {
  entry: [
    'react-hot-loader/patch',
    './src/client',
  ],
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: isProd ? '/static/' : `http://localhost:${WDS_PORT}/dist/`,
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.scss', '.css', '.jpeg', '.jpg', '.gif', '.png', '.map'],
    alias: {
      images: path.resolve(__dirname, 'src/assets/images'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.scss$/,
        loader: extractSass.extract({
          fallback: 'style-loader',
          use: [
            'css-loader', 'sass-loader',
          ],
        }),
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000',
      },
      {
        test: /\.(jpe?g|png|gif)$/i,
        loaders: ['file-loader?context=src/assets/images/&name=images/[path][name].[ext]', {
          loader: 'image-webpack-loader',
          query: {
            mozjpeg: {
              progressive: true,
            },
            gifsicle: {
              interlaced: false,
            },
            optipng: {
              optimizationLevel: 4,
            },
            pngquant: {
              quality: '75-90',
              speed: 3,
            },
          },
        }],
        exclude: /node_modules/,
      },
    ],
  },
  devtool: isProd ? false : 'source-map',
  devServer: {
    port: WDS_PORT,
    hot: true,
    contentBase: './src',
  },
  plugins: [
    extractSass,
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Tether: 'tether',
      'window.Tether': 'tether',
    }),
  ],
}

module.exports = config

if (isProd) {
  module.exports.plugins.push(
    new webpack.optimize.UglifyJsPlugin(),
  )
}

0 个答案:

没有答案