webpack.config.js ``` const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { filename: 'js/[name].js', path: resolve(__dirname, 'build') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, plugins: [new HtmlWebpackPlugin()], mode: 'development', resolve: { alias: { $css: resolve(__dirname, 'src/css') }, extensions: ['.js', '.json', '.jsx', '.css'], modules: [resolve(__dirname, '../../node_modules'), 'node_modules'] }, devServer: { // 運行代碼的目錄 contentBase: resolve(__dirname, 'build'), // 監視 contentBase 目錄下的所有文件，一旦文件變化就會 reload watchContentBase: true, watchOptions: { // 忽略文件 ignored: /node_modules/ }, // 啟動gzip壓縮 compress: true, // 端口號 port: 5000, // 域名 host: 'localhost', // 自動打開瀏覽器 open: true, // 開啟HMR功能 hot: true, // 不要顯示啟動服務器日志信息 clientLogLevel: 'none', // 除了一些基本啟動信息以外，其他內容都不要顯示 quiet: true, // 如果出錯了，不要全屏提示~ overlay: false, // 服務器代理 --> 解決開發環境跨域問題 proxy: { // 一旦devServer(5000)服務器接受到 /api/xxx 的請求，就會把請求轉發到另外一個服務器(3000) '/api': { target: 'http://localhost:3000', // 發送請求時，請求路徑重寫：將 /api/xxx --> /xxx （去掉/api） pathRewrite: { '^/api': '' } } } } }; ``` src/js/index.js ``` import '$css/index'; ``` src/css/index.css ``` html, body { height: 100%; background-color: pink; } ```