分出开发和生产(开发篇)
webpack从0开始搭建react的ts开发环境(11)
demo https://github.com/757566833/webpack-guide
1.先安装工具
// 合并工具
yarn add webpack-merge @types/webpack-merge --dev
2.新建webpack文件夹,把template.html移到webpack文件夹下
3.在webpack文件夹下新建webpack.common.ts
import path from 'path';
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import tsImportPluginFactory from "ts-import-plugin";
import webpack from "webpack";
const config: webpack.Configuration = {
entry: './src/app.tsx',
output: {
// 注意这里换了一级目录
path: path.resolve(__dirname,'..', 'dist'),
filename: 'app.js'
},
module: {
rules: [{
test: /\.tsx?$/,
loader: "ts-loader",
options: {
transpileOnly: true,
getCustomTransformers: () => ({
before: [tsImportPluginFactory({
libraryName: "antd",
libraryDirectory: "lib",
style: true,
})],
}),
compilerOptions: {
module: "es2015",
},
},
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
},
],
exclude: /node_modules/,
},
{
test: /\.less$/,
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
},
{
loader: "less-loader",
},
],
},
{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader
}, {
loader: 'css-loader',
}, {
loader: 'sass-loader'
}],
exclude: /node_modules/
},
]
},
plugins: [
new HtmlWebpackPlugin({
title: "test",
template: path.resolve(__dirname,'template.html'),
}),
new MiniCssExtractPlugin({
filename: "app.css",
}),
],
};
export default config;
4.在webpack文件夹下新建webpack.dev.ts
import path from "path";
import webpack from "webpack";
import merge from "webpack-merge";
import common from "./webpack.common";
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')
const config: webpack.Configuration = merge(common, {
mode: "development",
devtool: "inline-source-map",
devServer: {
//注意这里换了一级目录
contentBase: "../dist",
host: "0.0.0.0",
// 这个的作用是让webpack安静点
stats:'errors-warnings'
},
plugins: [
new ErrorOverlayPlugin()
],
});
export default config;
...
"scripts": {
"test": "tsc",
"webpack": "webpack",
"start": "webpack-dev-server --config webpack/webpack.dev.ts"
}
网友评论