Webpack part2: 实战2-未完

18_Webpack/day-2/webpack-demo/config/webpack.config.base.js

@@ -1,20 +1,71 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const isDev = process.env.NODE_ENV !== 'production';
 
 module.exports = {
   entry: {
     index: path.join(__dirname, '../src/main.js'),
   },
   output: {
-    filename: '[name].bundle.[chunkhash].js',
+    filename: isDev ? '[name].bundle.[chunkhash].js' : '[name].js',
     path: path.resolve(__dirname, '../dist'),
     clean: true, // 每一次打包前清空dist文件夹
   },
+  module: {
+    rules: [
+      {
+        test: /\.(png|svg|jpeg|gif)$/i,
+        include: path.join(__dirname, '../src'),
+        type: 'asset/resource',
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        include: [path.join(__dirname, '../src')],
+        type: 'asset/resource',
+      },
+      {
+        test: /\.(le|c)ss$/i,
+        include: [path.join(__dirname, '../src')],
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '../',
+            },
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              esModule: true,
+              modules: {
+                namedExport: true,
+                localIdentName: '[local]',
+              },
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [['postcss-preset-env']],
+              },
+            },
+          },
+          'less-loader',
+        ],
+      },
+    ],
+  },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Vue App',
       favicon: path.join(__dirname, '../public/favicon.ico'),
       template: path.join(__dirname, '../public/index.html'),
     }),
+    new MiniCssExtractPlugin({
+      filename: isDev ? '[name].[contenthash].css' : '[name].css',
+      chunkFilename: isDev ? '[id].[contenthash].css' : '[id].css',
+    }),
   ],
 };

18_Webpack/day-2/webpack-demo/package.json

@@ -15,6 +15,12 @@
   "devDependencies": {
     "css-loader": "^6.7.3",
     "html-webpack-plugin": "^5.5.0",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "mini-css-extract-plugin": "^2.7.5",
+    "postcss": "^8.4.21",
+    "postcss-loader": "^7.2.4",
+    "postcss-preset-env": "^8.3.0",
     "webpack": "^5.78.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.13.2",

18_Webpack/day-2/webpack-demo/src/assets/css/box.css

@@ -0,0 +1,14 @@
+.box {
+  width: 100px;
+  height: 100px;
+
+  background-color: aquamarine;
+}
+
+.red {
+  color: red;
+}
+
+.left {
+  float: left;
+}

18_Webpack/day-2/webpack-demo/src/assets/css/box.module.css

@@ -0,0 +1,14 @@
+.box {
+  width: 100px;
+  height: 100px;
+
+  background-color: aquamarine;
+}
+
+.red {
+  color: red;
+}
+
+.left {
+  float: left;
+}

18_Webpack/day-2/webpack-demo/src/main.css

@@ -0,0 +1,11 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  min-height: 100vh;
+
+  background-image: url('./assets/images/m2.jpeg');
+  background-repeat: no-repeat;
+}

18_Webpack/day-2/webpack-demo/src/main.js

@@ -1,3 +1,27 @@
+import imgSrc1 from './assets/images/m1.jpeg';
+
+import './main.css';
+
+import * as styles from './assets/css/box.css';
+
+console.log(styles);
+
+console.log(imgSrc1);
+
 console.log('hello,webpack.');
 // debugger; // 代码中 手动添加断点
 // alert(1);
+
+const root = document.querySelector('#app');
+
+let imgEl = new Image();
+
+imgEl.src = imgSrc1;
+
+root.append(imgEl);
+
+let divEl = document.createElement('div');
+
+divEl.classList.add(styles.box);
+
+root.append(divEl);