the whole project is ts architecture. This is my babelrc configuration. The style of the project is written in less, but when "style" is set to true, the style cannot be packaged. Only when it is set to css can it be packaged.
{
"presets": [
[
"es2015",
{
"modules": false
}
],
"react",
"stage-2"
],
"plugins": [
"react-hot-loader/babel",
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // true
}
],
[
"transform-runtime",
{
"helpers": false,
"polyfill": true,
"regenerator": true,
"moduleName": "babel-runtime"
}
]
]
}
this is my webpack.base.js configuration
const path = require("path");
const fs = require("fs");
const lessToJs = require("less-vars-to-js");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const command = process.argv.slice(2)[0];
const env = command.substring(command.indexOf("=") + 1);
const devUrlLoader = "url-loader?limit=8192&name=[hash:8].[name].[ext]";
const prodUrlLoader = "url-loader?limit=8192&name=[hash:8].[name].[ext]&outputPath=assets/images/&publicPath=assets/images";
// antd
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, "../src/assets/style/theme.less"), "utf8"));
module.exports = {
module: {
rules: [
{
test: /\.tsx?$/,
loader: ["babel-loader", "ts-loader"],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loaders: ["babel-loader"],
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader",
}],
fallback: "style-loader",
}),
},
{
test: /\.sass$/,
use: ["style-loader", "css-loader", "sass-loader?outputStyle=expanded&indentedSyntax"],
}, {
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader?outputStyle=expanded"],
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true,
namedExport: true,
camelCase: true,
minimize: true,
localIdentName: "[path][name]__[local]--[hash:base64:5]",
},
}, {
loader: "postcss-loader",
options: {
ident: "postcss",
sourceMap: true,
plugins: loader => [
require("postcss-import")(),
// require("stylelint")(),
require("autoprefixer")({
browsers: ["last 15 versions"],
}),
],
},
},
{
loader: "less-loader",
options: {
javascriptEnabled: true,
//modifyVars: themeVariables,
},
}],
fallback: "style-loader",
}),
},
{
test: /\.(png|jpe?g|gif|woff|woff2|ttf|eot)$/,
loader: env === "dev" ? devUrlLoader : prodUrlLoader,
},
{
test: /\.svg$/,
loader: "svg-sprite-loader",
},
],
},
resolve: {
modules: [
path.join(__dirname, "src"),
"node_modules",
],
extensions: [".js", ".json", ".jsx", ".ts", ".tsx"],
alias: {
config: path.resolve(__dirname, "src/config/"),
shared: path.resolve(__dirname, "src/shared/"),
utils: path.resolve(__dirname, "src/utils/"),
},
},
};
configuration of my webpack.dev.js
/*
* @ author wanliyunyan
* @ github https://github.com/wanliyunyan
* @ use webpack
*/
const commonConfig = require("./webpack.base.js");
const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = function (env) {
return Object.assign({}, commonConfig, {
cache: true,
devtool: "source-map",
entry: {
bundle: [
"babel-polyfill",
"react-hot-loader/patch",
"webpack-dev-server/client?http://localhost:8000",
"webpack/hot/only-dev-server",
"./src/index.tsx",
],
vendor: ["react", "react-dom"],
lib: ["antd"],
},
output: {
path: path.join(__dirname, "/../dist/assets/"),
filename: "[name].js",
publicPath: "/assets/",
sourceMapFilename: "[name].map",
},
devServer: {
historyApiFallback: true,
noInfo: false,
hot: true,
open: true,
stats: "minimal",
contentBase: "./src/",
publicPath: "/assets/",
compress: true,
port: 8000,
proxy: {
"/api/v1/*": {
target: "http://10.23.13.207:8001", // server
secure: false,
changeOrigin: true,
},
},
},
optimization: {
runtimeChunk: {
name: "manifest",
},
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin({
filename: "style.css",
disable: false,
allChunks: true,
}),
],
});
};
if you want to test the project, you can visit my github, and download the npm to see the page
.