How to output javascript files into 'static/js' directory and css files into 'static/css' directory
Question
This is my webpack.prod.config.js code
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
const dotenv = require('dotenv').config({path: path.join(__dirname, '.env')});
const HWP = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
mode: 'production',
entry: path.join(__dirname, '/src/index.jsx'),
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules:[
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]"
},
},
"sass-loader"
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed)
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].[contenthash].css',
}),
new HWP({
template: path.join(__dirname,'/src/index.html'),
minify: {
collapseWhitespace: true
}
})
],
optimization: {
minimizer: [
new TerserJSPlugin({}),
new OptimizeCssAssetsPlugin({})
]
},
output: {
filename: 'build.[contenthash].js',
path: path.join(__dirname, '/dist'),
publicPath: '/'
}
};
This is my yarn scripts
"scripts": {
"start": "webpack-dev-server --config webpack.dev.config.js",
"build": "webpack --config webpack.prod.config.js",
},
After I run yarn build the dist folder structure looks like this:
dist
├── build.c8bf456f14ce9fd024e4.js
├── 0.build.c42e9b89038bc14ee0d4.js
├── 1.build.155be64c26ba718adc27.js
├── main.58bf75b767e0f1d8310f.css
├── 0.c760db0e4330f75ffd4e.css
├── 1.68f70729629baaa5f35b.css
└── index.html
But I want to have all css files into static/css directory and have all javascript files into static/js directory. and of course the both of static/css directory and static/js directory should be inside the dist folder. to make the dist folder structure looks like this:
dist
├── static
│ ├── js
│ │ ├── build.c8bf456f14ce9fd024e4.js
│ │ ├── 0.build.c42e9b89038bc14ee0d4.js
│ │ └── 1.build.155be64c26ba718adc27.js
│ ├── css
│ │ ├── main.58bf75b767e0f1d8310f.css
│ │ ├── 0.c760db0e4330f75ffd4e.css
│ └── └── 1.68f70729629baaa5f35b.css
└── index.html
And of course the index.html file should have the correct path to the main javascript file and correct path to main css file. So if the name of main javascript file is build.c8bf456f14ce9fd024e4.js and the name of main css file is main.58bf75b767e0f1d8310f.css the code inside index.html file should be like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>APP TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/static/css/main.58bf75b767e0f1d8310f.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/static/js/build.c8bf456f14ce9fd024e4.js"></script>
</body>
</html>
1 answers
solution1
2 ACCPTED 2019-08-01 21:10:19
It may be helpful, but I do not see chunks for js files in your configuration?
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash].css',
chunkFilename: 'css/[id].[contenthash].css',
}),
output: {
filename: 'js/build.[contenthash].js',
path: path.join(__dirname, '/dist'),
chunkFilename: 'js/[name].[contenthash].js', // ?
publicPath: '/'
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.