编译报错
html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Document</ title > </ head > < body > < h1 >webpack</ h1 > < a href = "" >webpack</ a > < img src = "src/img/photo-1644962986863-d075ee548966.jpeg" alt = "" > </ body > </ html > |
css:
1 2 3 4 5 | body { /* background-image: url(img/photo-1644962986863-d075ee548966.jpeg); */ background-repeat : no-repeat ; background-color : black ; } |
js:
1 2 | import './index.css' ; console.log( 'index' ); |
webpack:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | const path = require( 'path' ); const HtmlWebpackPlugin = require( 'html-webpack-plugin' ); const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); module.exports = { mode: 'development' , entry: './src/1.js' , output: { filename: '[name].js' , path: path.resolve(__dirname, 'dist' ), }, module: { rules: [ { test: /\.css$/, use: [{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }, 'css-loader' ] }, { test: /\.(jpg|png|gif)$/, use: { loader: 'file-loader' , options: { name: 'img/[name].[ext]' } } }, { test: /\.(html|htm)$/, loader: 'html-withimg-loader' }] }, plugins: [ new HtmlWebpackPlugin({ template: './1.(html|htm)' }), new MiniCssExtractPlugin({ filename: 'css/[name].css' }) ], }; |
15
收起
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧