148 lines
3.6 KiB
JavaScript
148 lines
3.6 KiB
JavaScript
const path = require("path");
|
|
|
|
|
|
const HtmlWebPackPlugin = require("html-webpack-plugin");
|
|
|
|
// checks if it is production bundling or development bundling
|
|
|
|
const isEnvProduction = process.argv.includes("production")
|
|
|
|
// our root file
|
|
|
|
const entrypoint = './src/index.js'
|
|
|
|
const productionSettings = {
|
|
mode: "production",
|
|
|
|
entry: entrypoint,
|
|
output: {
|
|
// output directory will be the root directory of django
|
|
|
|
path: path.resolve(__dirname, '../'),
|
|
|
|
// this is the bundled code we wrote
|
|
filename: 'static/js/[name].js',
|
|
// this is the bundled library code
|
|
chunkFilename: 'static/js/[name].chunk.js'
|
|
|
|
},
|
|
|
|
optimization: {
|
|
minimize: true,
|
|
splitChunks: {
|
|
chunks: 'all',
|
|
name: true,
|
|
},
|
|
runtimeChunk: false,
|
|
},
|
|
devServer: {
|
|
historyApiFallback: true,
|
|
|
|
stats: 'normal',
|
|
},
|
|
module: {
|
|
rules: [
|
|
|
|
{
|
|
// for bundling transpiled javascript
|
|
|
|
test: /\\.m?js$/,
|
|
exclude: /(node_modules|bower_components)/,
|
|
use: {
|
|
loader: "babel-loader",
|
|
|
|
}
|
|
|
|
},
|
|
{
|
|
test: /\\.css$/i,
|
|
use: [
|
|
// IMPORTANT => don't forget `injectType` option
|
|
// in some cases some styles can be missing due to
|
|
// inline styling.
|
|
|
|
{ loader: 'style-loader', options: { injectType: 'styleTag' } },
|
|
|
|
"css-loader"
|
|
|
|
],
|
|
|
|
},
|
|
|
|
]
|
|
|
|
},
|
|
|
|
plugins: [
|
|
|
|
new HtmlWebPackPlugin({
|
|
// this is where webpack read our app for bundling
|
|
|
|
template: "./src/index.html",
|
|
|
|
// this is emitted bundle html file
|
|
// django will use this as template after bundling
|
|
|
|
filename:"./templates/index.html"
|
|
}),
|
|
]
|
|
|
|
};
|
|
|
|
|
|
const devSettings = {
|
|
|
|
mode: "development",
|
|
entry: entrypoint,
|
|
output: {
|
|
path: path.resolve(__dirname, './build'),
|
|
publicPath: "/",
|
|
filename: 'static/js/bundle.js',
|
|
chunkFilename: 'static/js/[name].chunk.js',
|
|
},
|
|
devtool: 'inline',
|
|
devServer: {
|
|
historyApiFallback: true,
|
|
contentBase: './dist',
|
|
stats: 'minimal',
|
|
},
|
|
module: {
|
|
rules: [
|
|
{ // using transpiled javascript
|
|
test: /\\.m?js$/,
|
|
exclude: /(node_modules|bower_components)/,
|
|
include: path.resolve(__dirname, 'src'),
|
|
use: {
|
|
loader: "babel-loader",
|
|
options: {
|
|
presets: ["@babel/preset-env"],
|
|
plugins: ["@babel/plugin-proposal-object-rest-spread"],
|
|
// for fast development environment
|
|
// enable caching transpilation
|
|
cacheDirectory: true
|
|
},
|
|
}
|
|
},
|
|
{
|
|
test: /\\.css$/i,
|
|
use: [
|
|
// IMPORTANT => don't forget `injectType` option
|
|
// in some cases some styles can be missing due to
|
|
// inline styling.
|
|
{ loader: 'style-loader', options: { injectType: 'styleTag' } },
|
|
"css-loader",
|
|
'postcss-loader'
|
|
//{ loader: 'sass-loader' },
|
|
],
|
|
},
|
|
]
|
|
},
|
|
plugins: [
|
|
new HtmlWebPackPlugin({
|
|
template: "./src/index.html",
|
|
})
|
|
]
|
|
};
|
|
|
|
module.exports = isEnvProduction ? productionSettings : devSettings;
|