8、webpack图片、样式分类

• 1、使用file-loader将图片打包产出文件

 yarn add file-loader -D

 module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: 'file-loader'
    }
  ]
}

• 2、解析html中的图片

 yarn add html-withimg-loader -D

 module: {
  rules: [
    {
      test: /\.html$/,
      use: 'html-withimg-loader'
    }
   ]
  }

• 3、将file-loader改成url-loader，可以设置图片小于多少kb为base64，否则再产出文件

 yarn add url-loader -D

module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 200 * 1024
        }
      }
    }
  ]
}

• 4、图片分类到文件夹

module: {
  rules: [
   {
    test: /\.(png|jpg|gif)$/,
    use: {
      loader: 'url-loader',
      options: {
        limit: 1000,
        outputPath: '/img/'
      }
    }
   }
  ]
}

• 5、css分类到文件夹

new MiniCssExtractPlugin({
  filename: 'css/main.css'
}),

• 6、统一添加域名,output添加publicPath

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'build'),
  publicPath: 'http://itssh.cn/'
}

• 7、只有图片添加域名

module: {
  rules: [
   {
    test: /\.(png|jpg|gif)$/,
    use: {
      loader: 'url-loader',
      options: {
        limit: 1000,
        outputPath: '/img/',
        publicPath: 'http://itssh.cn/'
      }
    }
    }
  ]
}

完整webpack.config.js

//  webpack是node写出来的， 需要node的写法
let path = require('path');
// path.resolve 相对路径转成绝对路径
// console.log(path.resolve('dist'));
// 以当前目录
// console.log(__dirname);

// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');

// 抽离css为单独文件
let MiniCssExtractPlugin =  require('mini-css-extract-plugin');
// 导入样式压缩
let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
// 压缩js
let UglifyjsPlugin =  require('uglifyjs-webpack-plugin');

// 导入webpack
let webpack = require('webpack');

// webpack相关配置
module.exports = {
    // 压缩 model 必须是production才有效果
    optimization: {
        minimizer: [
            new UglifyjsPlugin({
                // 使用缓存
                cache: true
            }),
            new OptimizeCssPlugin()
        ]      
    },
    // 开发服务的配置
    devServer: {
        // 端口，默认8080
        port: '8099',
        // 进度条
        progress: true,
        // 启动后访问目录，默认是项目根目录，这个设置到打包后目录
        contentBase: './build',
        // 启动压缩
        //compress: true
    },
    // 模式，2种：生产模式(production)和开发模式(development)
    // 开发模式不压缩打包后代码，生产模式压缩打包后代码
    mode: 'development',
    // 入口,表示从哪里开始打包
    entry: './src/index.js',   
    // 表示出口(输出后文件相关配置)
    output: {   
        // 打包后的文件名,产生哈希
        //filename: 'bundle.[hash].js',  
        // 哈希8位
        filename: 'bundle.[hash:8].js',  
        // 输出后的路径(必须是一个绝对路径)
        path: path.resolve(__dirname, 'dist'),
        // 如果静态文件放在了cdn css、图片路径自动添加前缀
        // publicPath: 'http://itssh.cn/'
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugins({
            // 模板位置
            template: 'index.html',
            // 文件名
            filename: 'index.html',
            // 生产开启，压缩代码
            // minify: {
            //     // 删除html双引号
            //     removeAttributeQuotes: true,
            //     // 压缩成一行
            //     collapseWhitespace: true
            // },
            // 文件哈希
            //hash: true
        }),
        // 抽离css为单独文件
        new MiniCssExtractPlugin({
            filename: 'css/main.css'
        }),
        // 压缩css
        //new OptimizeCssPlugin()
        // 压缩js
        // new UglifyjsPlugin({
        //     // 使用缓存
        //     cache: true
        // })
        new webpack.ProvidePlugin({
            $: 'jquery'
        })
    ],
    // 模块处理
    module: {
        // loader
        rules: [
            // {
            //     test: /\.js$/, //匹配js文件
            //     use: {
            //         loader: 'eslint-loader',
            //         options: {
            //             enforce: 'pre'  // previous post
            //         }
            //     }
            // },
            // expose-loader提供全局
            // {
            //     test: require.resolve('jquery'),
            //     use: 'expose-loader?$'
            // },
            {
                test: /\.html$/,
                use: 'html-withimg-loader'
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 打包少于1000kb用base64，否则使用file-loader产生文件
                        limit: 1000,
                        // 产出路径
                        outputPath: 'img/',
                        // 只给图片添加前缀，如果使用publicPath,outputPath无效
                        // publicPath: 'http://itssh.cn/'
                    }
                }
            },
            // {
            //     test: /\.(png|jpg|gif)$/,
            //     use: 'file-loader',
            // },
            {
                test: /\.js$/, //匹配js文件
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ],
                        plugins: [
                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
                            ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                }
            },
            {
                test: /\.css$/, //匹配css文件
                // css-loader 处理css文件@import嵌套
                // style-loader 把css插入header
                // 多个loader需要数组，单个可写成字符串
                // loader顺序：从右向左执行,从下到上，单个loader可添加更多配置，使用对象形式
                // use: [{loader: 'style-loader', options: ...}, 'css-loader']
                // use: [{
                //    loader: 'style-loader',
                //    options: {
                //        // 样式插入到顶部
                //        insertAt: 'top'
                //    }
                // }, 'css-loader']
                // css-load处理完 再 抽离，从后往前执行loader
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ]
            },
            {
                test: /\.less$/, //匹配less文件
                // css-loader 处理css文件@import嵌套
                // style-loader 把css插入header
                // 多个loader需要数组，单个可写成字符串
                // loader顺序：从右向左执行,从下到上，单个loader可添加更多配置，使用对象形式
                // use: [{loader: 'style-loader', options: ...}, 'css-loader']
                // use: [{
                //    loader: 'style-loader',
                //    options: {
                //        // 样式插入到顶部
                //        insertAt: 'top'
                //    }
                // }, 'css-loader', 'less-loader']
                // 从后向前执行
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' , 'less-loader']
            }
        ]
    }
}