webpack基础

1、

        // webpack.config.js文件配置
        const path = require('path');
        
        module.exports = {
            mode: "development",   // 默认为"production"
            entry: './js/index.js',
            output: {
                path: path.resolve(__dirname, 'build'),  // 利用webpack的path包转化为绝对路径  打包后文件存在build文件夹下
                filename: 'bundle.js'
            }
        }

打包命令为 webpack

2、

sass-loader 引入公用文件或全局变量

      {
                test:/\.(sass|scss)$/,
                use:[
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            prependData: `@import './src/css/mixin.scss';`
                        }
                    },
                ]
            },

3、

引入--loader

style-loader: 创建一个style标签
style-loader/url: 在html中插入一个link标签(配合file-loader使用),一个很小众的功能，会把每个import的css都处理成一个link标签，造成加载资源的增加，不利于优化
file-loader: 生成一个新的css文件
style-loader/useable: 在style中控制样式插入或者不插入，import了css后可以使用 .use() 或者 .unuse()的方法来控制样式是否插入
css-loader: 允许js来import一个css文件