Path :path.join(__dirname,'./dist') join(__dirname,'./dist' */ const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode:'development', // Default production =>development The difference is whether to compress entry:'./ SRC /js/index.js', Output :{path:path.resolve('./dist'), // output:{path:path.resolve('./dist'), // Output :{path:path.resolve('./dist'), // Output :{path:path.resolve('./dist'), // Output :{path:path.resolve('./dist'), // Output :{path:path.resolve('./dist'), // devServer:{ open:true, port:8090, compress:true, // contentBase:'./src', hot:true, }, Plugins :[new HtmlWebpackPlugin({filename:'index.html', // output filename ==> switch to another filename to generate the file template:'./index.html', / / template file})], the module: {rules: [{test: / \. CSS $/, / / / / when reading a loader webpack If the CSS file is read from right to left, the CSS file will be handed to the right-most (bottom-most) loader for processing // //loader to execute the sequence of the chain call // // CSS-loader to parse the CSS file,style-loader to parse the data on the HTML rendering page Use: [' style - loader ', 'CSS - loader']}, {test: / \. Less $/, / / / / when reading a loader webpack If the CSS file is read from right to left, the CSS file is handed to the right-most (bottom-most) loader for processing // // Loader to execute sequence chain call // conversion process less-loader converts less files to CSS files style-loader parses CSS files Render the use CSS - loader: [' style - loader ', 'CSS - loader', 'less - loader]}, {test: / \. S (a | c) ss $/, use:['style-loader','css-loader','sass-loader'] }, { test:/\.(jpg|jpeg|png|bmp|gif)$/, use:{ loader:'url-loader', //url-loader is based on file-loader, so you need to download option:{limit:3*1024, // This parameter configates the base64 string output when the image resource content is less than 3KB (reducing server requests) outputPath:'image', / / output file path strength output under the root directory of the project = = > > directly save the file name. Name: '[name] - [hash: 6] [ext]', / / name = > the original file name + hash: before 6 + default extension}}}, { test:/\.(woff|woff2|eot|svg|ttf)$/, use:['url-loader'] }, ] } }Copy the code