Skip to content

Commit 493ef15

Browse files
ThierryRakotomananaThierryRakotomanana
authored
feat(cwa): convert the default template from CommonJS to ECMA modules syntax (#4709)
1 parent 49efdc0 commit 493ef15

File tree

11 files changed

+395
-308
lines changed

11 files changed

+395
-308
lines changed

‎.changeset/kind-ducks-sniff.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"create-webpack-app": feat
3+
---
4+
5+
Covert templates to ECMA modules syntax.

‎packages/create-webpack-app/templates/init/default/package.json.tpl‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
{
22
"version": "1.0.0",
3-
43
"description": "My webpack project",
5-
64
"name": "webpack-project",
5+
"type": "module",
76
"scripts": {
87
"build": "webpack --mode=production --config-node-env=production",
98
"build:dev": "webpack --mode=development",

‎packages/create-webpack-app/templates/init/default/postcss.config.js.tpl‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
module.exports = {
1+
import autoprefixer from "autoprefixer";
2+
3+
export default {
24
// Add you postcss configuration here
35
// Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
46
plugins: [["autoprefixer"]],

‎packages/create-webpack-app/templates/init/default/webpack.config.js.tpl‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
11
// Generated using webpack-cli https://github.com/webpack/webpack-cli
22

3-
const path = require('path');<% if (htmlWebpackPlugin) { %>
4-
const HtmlWebpackPlugin = require('html-webpack-plugin');<% } %><% if (extractPlugin !== 'No') { %>
5-
const MiniCssExtractPlugin = require('mini-css-extract-plugin');<% } %><% if (workboxWebpackPlugin) { %>
6-
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');<% } %>
3+
import path from "node:path";
4+
import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %>
5+
import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
6+
import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %>
7+
import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>
78

8-
const isProduction = process.env.NODE_ENV === 'production';
9-
<% if (cssType !== 'none') { %>
9+
const __filename = fileURLToPath(import.meta.url);
10+
const __dirname = path.dirname(__filename);
11+
const isProduction = process.env.NODE_ENV === "production";
12+
<% if (cssType !== "none") { %>
1013
<% if (extractPlugin === "Yes") { %>
1114
const stylesHandler = MiniCssExtractPlugin.loader;
1215
<% } else if (extractPlugin === "Only for Production") { %>
13-
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';
16+
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";
1417
<% } else { %>
15-
const stylesHandler = 'style-loader';
18+
const stylesHandler = "style-loader";
1619
<% } %>
1720
<% } %>
1821

1922
/** @type {import("webpack").Configuration} */
2023
const config = {
21-
entry: '<%= entryPoint %>',
24+
entry: "<%= entryPoint %>",
2225
output: {
23-
path: path.resolve(__dirname, 'dist'),
26+
path: path.resolve(__dirname, "dist"),
2427
},<% if (devServer) { %>
2528
devServer: {
2629
open: true,
27-
host: 'localhost',
30+
host: "localhost",
2831
},<% } %>
2932
plugins: [<% if (htmlWebpackPlugin) { %>
3033
new HtmlWebpackPlugin({
31-
template: 'index.html',
34+
template: "index.html",
3235
}),
3336
<% } %><% if (extractPlugin === "Yes") { %>
3437
new MiniCssExtractPlugin(),
@@ -40,63 +43,63 @@ const config = {
4043
rules: [<% if (langType == "ES6") { %>
4144
{
4245
test: /\.(js|jsx)$/i,
43-
loader: 'babel-loader',
46+
loader: "babel-loader",
4447
},<% } %><% if (langType == "Typescript") { %>
4548
{
4649
test: /\.(ts|tsx)$/i,
47-
loader: 'ts-loader',
48-
exclude: ['/node_modules/'],
50+
loader: "ts-loader",
51+
exclude: ["/node_modules/"],
4952
},<% } %><% if (isCSS && !isPostCSS) { %>
5053
{
5154
test: /\.css$/i,
52-
use: [stylesHandler,'css-loader'],
53-
},<% } %><% if (cssType == 'SASS') { %>
55+
use: [stylesHandler,"css-loader"],
56+
},<% } %><% if (cssType == "SASS") { %>
5457
{
5558
test: /\.s[ac]ss$/i,
56-
use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'sass-loader'],
57-
},<% } %><% if (cssType == 'LESS') { %>
59+
use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
60+
},<% } %><% if (cssType == "LESS") { %>
5861
{
5962
test: /\.less$/i,
60-
use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'less-loader'],
61-
},<% } %><% if (cssType == 'Stylus') { %>
63+
use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"],
64+
},<% } %><% if (cssType == "Stylus") { %>
6265
{
6366
test: /\.styl$/i,
64-
use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'stylus-loader'],
67+
use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
6568
},<% } %><% if (isPostCSS && isCSS) { %>
6669
{
6770
test: /\.css$/i,
68-
use: [stylesHandler, 'css-loader', 'postcss-loader'],
71+
use: [stylesHandler, "css-loader", "postcss-loader"],
6972
},<% } %>
7073
{
7174
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
72-
type: 'asset',
75+
type: "asset",
7376
},
7477
%><% if (htmlWebpackPlugin) { %>
7578
{
7679
test: /\.html$/i,
77-
use: ['html-loader'],
80+
use: ["html-loader"],
7881
},<% } %>
7982

8083
// Add your rules for custom modules here
8184
// Learn more about loaders from https://webpack.js.org/loaders/
8285
],
8386
},<% if (langType == "Typescript") {%>
8487
resolve: {
85-
extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
88+
extensions: [".tsx", ".ts", ".jsx", ".js", "..."],
8689
},<% } %>
8790
};
8891

89-
module.exports = () => {
92+
export default () => {
9093
if (isProduction) {
91-
config.mode = 'production';
94+
config.mode = "production";
9295
<% if (extractPlugin === "Only for Production") { %>
9396
config.plugins.push(new MiniCssExtractPlugin());
9497
<% } %>
9598
<% if (workboxWebpackPlugin) { %>
9699
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
97100
<% } %>
98101
} else {
99-
config.mode = 'development';
102+
config.mode = "development";
100103
}
101104
return config;
102105
};

‎packages/create-webpack-app/templates/init/react/package.json.tpl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"version": "1.0.0",
33
"description": "My webpack project",
44
"name": "my-webpack-project",
5+
"type": "module",
56
"scripts": {
67
"build": "webpack --mode=production --config-node-env=production",
78
"build:dev": "webpack --mode=development",

‎packages/create-webpack-app/templates/init/react/webpack.config.js.tpl‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
11
// Generated using webpack-cli https://github.com/webpack/webpack-cli
22

3-
const path = require('path');<% if (htmlWebpackPlugin) { %>
4-
const HtmlWebpackPlugin = require('html-webpack-plugin');<% } %><% if (extractPlugin !== 'No') { %>
5-
const MiniCssExtractPlugin = require('mini-css-extract-plugin');<% } %><% if (workboxWebpackPlugin) { %>
6-
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');<% } %>
3+
import path from "node:path";
4+
import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %>
5+
import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
6+
import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %>
7+
import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>
78

8-
const isProduction = process.env.NODE_ENV === 'production';
9-
<% if (cssType !== 'none') { %>
9+
const __filename = fileURLToPath(import.meta.url);
10+
const __dirname = path.dirname(__filename);
11+
const isProduction = process.env.NODE_ENV === "production";
12+
<% if (cssType !== "none") { %>
1013
<% if (extractPlugin === "Yes") { %>
1114
const stylesHandler = MiniCssExtractPlugin.loader;
1215
<% } else if (extractPlugin === "Only for Production") { %>
13-
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';
16+
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";
1417
<% } else { %>
15-
const stylesHandler = 'style-loader';
18+
const stylesHandler = "style-loader";
1619
<% } %>
1720
<% } %>
1821

1922
/** @type {import("webpack").Configuration} */
2023
const config = {
21-
entry: '<%= entry %>',
24+
entry: "<%= entry %>",
2225
output: {
23-
path: path.resolve(__dirname, 'dist'),
26+
path: path.resolve(__dirname, "dist"),
2427
},<% if (devServer) { %>
2528
devServer: {
2629
open: true,
27-
host: 'localhost',
30+
host: "localhost",
2831
},<% } %>
2932
plugins: [<% if (htmlWebpackPlugin) { %>
3033
new HtmlWebpackPlugin({
31-
template: 'index.html',
34+
template: "index.html",
3235
}),
3336
<% } %><% if (extractPlugin === "Yes") { %>
3437
new MiniCssExtractPlugin(),
@@ -50,32 +53,32 @@ const config = {
5053
},<% } %><% if (langType == "Typescript") { %>
5154
{
5255
test: /\.(ts|tsx)$/i,
53-
loader: 'ts-loader',
54-
exclude: ['/node_modules/'],
56+
loader: "ts-loader",
57+
exclude: ["/node_modules/"],
5558
},<% } %><% if (isCSS && !isPostCSS) { %>
5659
{
5760
test: /\.css$/i,
58-
use: [stylesHandler,'css-loader'],
59-
},<% } %><% if (cssType == 'SASS') { %>
61+
use: [stylesHandler,"css-loader"],
62+
},<% } %><% if (cssType == "SASS") { %>
6063
{
6164
test: /\.s[ac]ss$/i,
62-
use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'sass-loader'],
63-
},<% } %><% if (cssType == 'LESS') { %>
65+
use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
66+
},<% } %><% if (cssType == "LESS") { %>
6467
{
6568
test: /\.less$/i,
66-
use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'less-loader'],
67-
},<% } %><% if (cssType == 'Stylus') { %>
69+
use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"],
70+
},<% } %><% if (cssType == "Stylus") { %>
6871
{
6972
test: /\.styl$/i,
70-
use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'stylus-loader'],
73+
use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
7174
},<% } %><% if (isPostCSS && isCSS) { %>
7275
{
7376
test: /\.css$/i,
74-
use: [stylesHandler, 'css-loader', 'postcss-loader'],
77+
use: [stylesHandler, "css-loader", "postcss-loader"],
7578
},<% } %>
7679
{
7780
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
78-
type: 'asset',
81+
type: "asset",
7982
},
8083

8184
// Add your rules for custom modules here
@@ -86,21 +89,21 @@ const config = {
8689
alias: {
8790
"@": path.resolve(__dirname, "./src/"),
8891
},
89-
extensions: ['.jsx', '.js'<% if (langType === 'Typescript') { %>, '.tsx', '.ts'<% } %>],
92+
extensions: [".jsx", ".js"<% if (langType === "Typescript") { %>, ".tsx", ".ts"<% } %>],
9093
},
9194
};
9295

93-
module.exports = () => {
96+
export default () => {
9497
if (isProduction) {
95-
config.mode = 'production';
98+
config.mode = "production";
9699
<% if (extractPlugin === "Only for Production") { %>
97100
config.plugins.push(new MiniCssExtractPlugin());
98101
<% } %>
99102
<% if (workboxWebpackPlugin) { %>
100103
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
101104
<% } %>
102105
} else {
103-
config.mode = 'development';
106+
config.mode = "development";
104107
}
105108
return config;
106109
};

‎packages/create-webpack-app/templates/init/svelte/package.json.tpl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"version": "1.0.0",
33
"description": "My webpack project",
44
"name": "my-webpack-project",
5+
"type": "module",
56
"scripts": {
67
"build": "webpack --mode=production --config-node-env=production",
78
"build:dev": "webpack --mode=development",

0 commit comments

Comments
 (0)