//Since webback is built on nide, any legal node code is supported when configuring files.
// 1. Import Path Template
const path =require('path');
// Import plug-ins that generate html pages in memory
const htmlWebpackPlugin = require("html-webpack-plugin")
// 2. Operating through modules in node To expose a configuration object
module.exports = {
// Configure the default development mode for packaging
mode:'development',
// Configure the entry path: the file to be packaged
entry:path.join(__dirname,'./src/scss/index.css'),
// Configure exit path: specify packaged files
/* output: path. join (_dirname,'. / dist'), // specify the path of the output*/
output:{
Path: path. join (_dirname,'. / dist/css'), // specify the path of the output
filename:'main.css', // specifies the name of the output file
},
// Configuring dev-server parameter method 2
// devServer:{
// open:true, // auto-open
// port:3000, // / Set Port Number
// hot:true // enable hot update
// }
//Configuration plug-ins - > All webpack plug-ins are configured here // plugins:[ // // Create a plug-in that generates html in memory // // // The role of plug-ins // // Automatically generate a memory page in memory based on the specified page // // Automatically append packaged main.js to memory // new htmlWebpackPlugin({ // // Specify the path to the template file // template:path.join(__dirname,"./src/index.html"), // // Set the name of the generated memory page // filename:"index.html", // }) // ], //Configuring the third-party loader module module:{ //Matching rules for third-party modules rules:[ {test:/\.css$/,use:["style-loader","css-loader"]},//Processing the conversion of css files {test:/\.less$/,use:["style-loader","css-loader","less-loader"]}, {test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]}, {test:/\.(jpg|png|gif|jpeg)$/,use:"url-loader?limit=6219&name=[hash:8].[ext]"}, //Pictures in base64 format can reduce secondary requests, and only small pictures can be turned. //limit = Picture Size Byte When Picture Byte > Set Byte to Hash Value // When Picture Bytes > Set Bytes to base64 format // If you want to use the name of your picture, the second parameter of the family & name=[name]. [ext] //To prevent the image rename from being overwritten, add a hash value & name=[hash:8]. [ext] //The hash value is unique, and it is impossible for two data to have the same hash value and the most to 32 bits. {test:/\.(ttf|eot|svg|woff|woff2)$/,use:"url-loader"}, // Configure babel to convert advanced js syntax //When configuring, it is necessary to exclude the node_modules directory. babel will package and compile all js files of node_modules, which will consume CPU of the computer and pack slowly. It can not exclude errors and can not run. //Create a new. babelrc file in the project's root directory, which is equivalent to a json file, and configure the relevant babel parameters {test:/\.js$/,use:"babel-loader",exclude:/node_modules/}, //Processing. Vue files {test:/\.vue$/,use:"vue-loader"} ] }, //Configuration modification path resolve:{ //Modify the path when Vue is imported alias:{ "vue$":"vue/dist/vue.js" } }
}