Web pack related configuration

Keywords: Vue Webpack less hot update

//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"
    }
}

}

Posted by gammaman on Fri, 11 Oct 2019 13:19:29 -0700