[JavaScript知识库]webpack中loader的使用

css-loader配置

1. 在index.js中导入css文件 import ‘./css/index.css’.
2. 命令 npm i style-loader@版本号 css-loader@版本号 -D
3. 在webpack.config.js中的module的rules数组中创建。

module.exports = {
    module: {
        rules: [
            //css-loader的配置，顺序不能改变，从后往前执行
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }
}

less-loader配置

1. 在index.js中导入less文件，import “./css/index.less”
2. 命令 npm install less less-loader --save-dev(-D)

module.exports = {
    module: {
        rules: [
            //处理less文件的loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            
        ]
    }
}

url-loader 图片

1. 在index.js导入图片，import logo from ‘./logo.jpg’
2. 命令 npm install file-loader url-loader -D

module.exports = {
    module: {
        rules: [
            //处理图片的文件
            { test: /\.jpg|png|gif$/, use: 'url-loader?limit=18888' }
        ]
    }
}

3. url-loader的?后的参数项表示图片的大小，如果图片的大小小于该limit的值，则会转为base64格式的图片，limit小于图片的值则会转为http格式的路径图片。

对js文件进行优化

优化主要是将js文件统统放在js目录中。

module.exports = {
    //entry: '指定处理的文件'
    entry: path.join(__dirname, './src/index.js'), //指定的打包入口脚本文件
    //指定生成的文件存放在哪里
    output: {
        //存放的目录
        path: path.join(__dirname, 'dist'),
        //生成的文件
        //将会在打包时创建一个js目录，打包的js文件会放在js目录下
        filename: 'js/index.js' 
    }
}

对image图片优化

创建images目录，所有图片放在images下。

module.exports = {
    module: {
        rules: [
            //处理图片的文件
            { test: /\.jpg|png|gif$/, use: 'url-loader?limit=18888&outputPath=images' }
        ]
    }
}