開發環境 webpack.config.js
阿新 • • 發佈:2021-12-08
const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin'); // 設定nodejs環境變數 設定開發環境的配置,預設看生產環境 // process.env.NODE_ENV = 'development' module.exports = { entry: ['./src/js/index.js', './src/index.html'], output: { filename: 'js/main.js', path: resolve(__dirname, 'build'), // 將某些資源傳送到指定目錄, assetModuleFilename: 'images/[hash:10][ext][query]', clean: true //每次構建前清理 /build 資料夾 }, module: { rules: [ // 載入css { test: /\.css$/, use: ['style-loader', 'css-loader'], }, // 載入less { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 載入images url中的圖片資源 { test: /\.(png|svg|jpg|jpeg|gif)$/, type: 'asset/resource' }, // 將 HTML 匯出為字串,需要傳入靜態資源的引用路徑 { test: /\.html$/, loader: 'html-loader' }, // 載入其他檔案資源 { exclude: /\.(js|css|less|html|jpg|png|gif)$/, loader: 'file-loader', options: { outputPath: 'static', name: '[hash:10].[ext]' } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', }), ], mode: 'development', devServer: { // 未配置埠,預設localhost:8080 static: './build', // 啟動gzip壓縮 compress: true, open: true, hot: true }, devtool: 'source-map' }