webpack 基本属性配置

版权声明：本文章可转载，转载请注明本文地址，谢谢~ https://blog.csdn.net/weixin_43307658/article/details/86658087

欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

const path = require('path')
module.exports = {
    entry: { // main是默认入口，也可以是多入口
        main: './src/main.js'
    },
    // 出口
    output: {
        filename: './build.js', // 指定js路径
        path: path.join(__dirname, '..', '', 'dist') // 最好是绝对路径
        // 代表上一级的dist
    },
    module: {
        // 一样的功能rules: webpack2.xx新加的
        loaders: [ // require('./a.css||./a.js')
            {
                test: /\.css$/,
            	loader: 'style-loader!css=loader',
                //多个loader用!分割
                //顺序是反过来的 2!1  多个loader
            },
            {
                test: /\.(jpg|svg)$/,
                loaderL 'url-loader?limit=4096&name=[name].[ext]',
                // limit=4096&name=[name].[ext]' 多个参数之间用&符号分割
                //[name].[ext]内置提供的
                options: {
                    limit: 4096,
                    name: '[name].[ext]'
            	}
            }
        ]  
    },
    plugins: [
        // 插件的执行顺序是依次执行的，和loader是反过来的
        new htmlWebpackPlugin({
            template: './src/index.html',
        })
        // 将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录。
        // 在插件的执行过程中，它本身可以去拿当前所设置的webpack选项，便于对webpack选项的复用，
    ]
}