我目前正在更改项目的文件夹结构,但在更改文件夹结构后,我无法让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(),
)
}