Browse Source

feat: add postcss feature

yhhu 5 years ago
parent
commit
beb9cf97ba

File diff suppressed because it is too large
+ 1 - 0
dist/images/icon-calendar-2_np6.svg


File diff suppressed because it is too large
+ 1 - 0
dist/images/icon-close-3ouHO.svg


+ 16 - 0
dist/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Datepicker</title>
+	
+		<link href="main.7bcd97632367f921e277.css" rel="stylesheet">
+	
+</head>
+<body>
+	<div id="container" class="container"></div>
+	
+		<script src="main-bundle-7bcd9763.js"></script>
+	
+</body>
+</html>

File diff suppressed because it is too large
+ 41 - 0
dist/main-bundle-7bcd9763.js


File diff suppressed because it is too large
+ 7 - 0
dist/main.7bcd97632367f921e277.css


+ 5 - 0
package.json

@@ -18,6 +18,7 @@
     "react-dom": "^16.5.2"
   },
   "devDependencies": {
+    "autoprefixer": "^9.1.5",
     "babel-core": "^6.26.3",
     "babel-eslint": "^9.0.0",
     "babel-loader": "7.1.5",
@@ -25,6 +26,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "css-loader": "^1.0.0",
+    "cssnano": "^4.1.4",
     "eslint": "^5.6.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-loader": "^2.1.1",
@@ -34,8 +36,11 @@
     "file-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.4.3",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.0.7",
     "pre-commit": "^1.2.2",
     "style-loader": "^0.23.0",
+    "sugarss": "^2.0.0",
     "webpack": "^4.19.1",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.8"

+ 8 - 0
postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = ({ file }) => ({
+  parser: file.extname === '.pug' ? 'sugarss' : false,
+  plugins: {
+    'postcss-preset-env': {},
+    'autoprefixer': {},
+    'cssnano': {},
+  },
+})

+ 7 - 4
webpack/webpack.config.prod.js

@@ -24,7 +24,7 @@ module.exports = {
           {
             loader: MiniCssExtractPlugin.loader,
             options: {
-              publicPath: '../dist/styles',
+              publicPath: './',
             },
           },
           {
@@ -35,20 +35,23 @@ module.exports = {
               localIdentName: '[name]__[local]--[hash:base64:5]',
             },
           },
+          'postcss-loader',
         ],
       },
       {
+        test: /\.(jpe?g|png|svg|bmp)$/,
         loader: 'file-loader',
         options: {
-          outputPath: path.resolve(projectPath, 'dist/images'),
+          outputPath: 'images/',
+          name: '[name]-[hash:base64:5].[ext]',
         },
       },
     ],
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[id].css',
+      filename: '[name].[hash].css',
+      chunkFilename: '[id].[hash:base64:5].css',
     }),
     new HtmlWebpackPlugin({
       title: 'Datepicker',

File diff suppressed because it is too large
+ 1048 - 20
yarn.lock