diff options
| author | crupest <crupest@outlook.com> | 2020-08-24 01:23:48 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-08-24 01:23:48 +0800 |
| commit | 4eb7a984e10d15fdb8ef988e1571b114fa74e420 (patch) | |
| tree | 2769b745dd95a8ed5980970739a9b802591ff8cf /Timeline/ClientApp/webpack.common.js | |
| parent | e9e0888e9f8a204a29109cb1bb6950c1d72599d6 (diff) | |
| parent | 990b6448fe85fbf56dae0206a8478b36b7ce0e75 (diff) | |
| download | timeline-4eb7a984e10d15fdb8ef988e1571b114fa74e420.tar.gz timeline-4eb7a984e10d15fdb8ef988e1571b114fa74e420.tar.bz2 timeline-4eb7a984e10d15fdb8ef988e1571b114fa74e420.zip | |
Merge pull request #152 from crupest/webpack-chain
Migrate to webpack chain.
Diffstat (limited to 'Timeline/ClientApp/webpack.common.js')
| -rw-r--r-- | Timeline/ClientApp/webpack.common.js | 142 |
1 files changed, 96 insertions, 46 deletions
diff --git a/Timeline/ClientApp/webpack.common.js b/Timeline/ClientApp/webpack.common.js index bed968e1..a5dce879 100644 --- a/Timeline/ClientApp/webpack.common.js +++ b/Timeline/ClientApp/webpack.common.js @@ -1,48 +1,100 @@ -const autoprefixer = require('autoprefixer');
+const path = require('path');
const htmlWebpackTemplate = require('html-webpack-template');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const PnpWebpackPlugin = require('pnp-webpack-plugin');
+const postcssPresetEnv = require('postcss-preset-env');
+const Config = require('webpack-chain');
-const commonRules = [
- {
- test: /\.css$/,
- use: ['style-loader', 'css-loader'],
- },
- {
- test: /\.(scss|sass)$/,
- use: [
- 'style-loader',
- 'css-loader',
- {
- loader: 'postcss-loader',
- options: {
- plugins: function () {
- return [autoprefixer];
- },
- },
- },
- 'sass-loader',
- ],
- },
- {
- test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/i,
- use: [
- {
- loader: 'url-loader',
- options: {
- limit: 8192,
- },
- },
- ],
- },
-];
+const config = new Config();
+
+config.entry('index').add(path.resolve(__dirname, 'src/app/index.tsx'));
+
+config.module
+ .rule('ts')
+ .test(/\.ts(x?)$/)
+ .exclude.add(/node_modules/)
+ .end()
+ .use('babel')
+ .loader('babel-loader')
+ .end()
+ .use('ts')
+ .loader('ts-loader')
+ .end();
+
+config.module
+ .rule('js')
+ .test(/\.js(x?)$/)
+ .exclude.add(/node_modules/)
+ .end()
+ .use('babel')
+ .loader('babel-loader')
+ .end();
-const htmlCommonConfig = {
- inject: false,
- template: htmlWebpackTemplate,
+config.module
+ .rule('css')
+ .test(/\.css$/)
+ .use('style')
+ .loader('style-loader')
+ .end()
+ .use('css')
+ .loader('css-loader')
+ .end();
- appMountId: 'app',
- mobile: true,
+config.module
+ .rule('sass')
+ .test(/\.(scss|sass)$/)
+ .use('style')
+ .loader('style-loader')
+ .end()
+ .use('css')
+ .loader('css-loader')
+ .end()
+ .use('postcss')
+ .loader('postcss-loader')
+ .options({
+ plugins: () => [postcssPresetEnv(/* pluginOptions */)],
+ })
+ .end()
+ .use('sass')
+ .loader('sass-loader')
+ .end();
- headHtmlSnippet: `
+config.module
+ .rule('file')
+ .test(/\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/i)
+ .use('url')
+ .loader('url-loader')
+ .options({
+ limit: 8192,
+ });
+
+config.resolve.extensions
+ .add('*')
+ .add('.js')
+ .add('.jsx')
+ .add('.ts')
+ .add('.tsx')
+ .end()
+ .plugin('pnp')
+ .use(PnpWebpackPlugin);
+
+config.resolveLoader.plugin('pnp').use(PnpWebpackPlugin.moduleLoader(module));
+
+config.output
+ .path(path.resolve(__dirname, 'dist/'))
+ .filename('[name].[hash].js')
+ .chunkFilename('[name].[hash].js')
+ .publicPath('/');
+
+config.plugin('html').use(HtmlWebpackPlugin, [
+ {
+ inject: false,
+ template: htmlWebpackTemplate,
+
+ appMountId: 'app',
+ mobile: true,
+
+ headHtmlSnippet: `
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
@@ -51,10 +103,8 @@ const htmlCommonConfig = { <meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#ffffff">
`,
- title: 'Timeline',
-};
+ title: 'Timeline',
+ },
+]);
-module.exports = {
- commonRules,
- htmlCommonConfig,
-};
+module.exports = config;
|