webpack基本概念学习-三

178 阅读2分钟

1将css 提取成单独文件+css兼容性处理+压缩css

//  webpack.config.js webpack的配置文件
// 作用:指示webpack 干哪些活(当你运行webpack指令时,会加载里面的配置)

//  所有构建工具都是基于node js平台运行的~ 模块化默认采用common.js

// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
//
process.env.NODE_ENV = "developement"
module.exports = {
    // webpack 配置

    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: './js/build.js',
        // 输出路径
        // __dirname nodejs 的变量,代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader的配置
    module: {
        rules: [
            // 详细loader配置
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // 创建style标签,将js中样式资源插入进行,添加到head中生效
                    // 'style-loader',

                    // loader 取代 style-loader 。作用:提取css成单独文件
                    MiniCssExtractPlugin.loader,
                    // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',

                    //css 兼容性处理:postcss--> postcss-loader  postcss-preset-env

                    //  对浏览器兼容处理
                    // "browserslist": {
                    //开发环境  --> 设置node环境变量: process.env.NODE_ENV = developement
                    //     "development": [
                    //       "last 1 chrome version",
                    //       "last 1 firefox version",
                    //       "last 1 safari version"
                    //     ],
                    // 生产环境
                    //     "production": [
                    //       ">0.2%",
                    //       "not dead",
                    //       "not op_minni all"
                    //     ]
                    //   }
                    //使用loader的默认配置
                    //post-loader
                    // 修改loader的配置
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => {
                                // postcss的插件
                                require('postcss-preset-env')()
                            }
                        }
                    }
                ]
            }, {
                test: /\.less$/,
                // 使用哪些loader进行处理
                //使用多个loader处理 用use
                use: [
                    // 创建style标签,将js中样式资源插入进行,添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',
                    //将less文件编译成css文件
                    //需要下载less 和less-loaders
                    'less-loader'
                ]
            }, {

                //打包其他资源 
                // 排除 css js html 资源
                exclude: /\.(css|less|js|html)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    // 打包输出文件夹目录
                    outputPath: 'media'
                }
            }, {
                // 问题:默认处理不了html 中的img图片
                test: /\.(jpg|png|gif|jpeg)$/,
                // 需要下载url-loader 和 file-loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb,就会被base64处理,
                    // 优点:减少请求数量(减轻服务器压力)
                    // 缺点:图片体积会更大(文件请求速度更慢)
                    limit: 8 * 1024,
                    esModule: false,
                    // 给图片进行重新命名
                    // [hash:10] 取哈希值的前十位
                    // [ext] 取文件原来的扩展名
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs',
                }
            }, {
                test: /\.html$/,
                // 处理html 文件的img图片(负责引入img,从而能被url-loaderurl-loader进行处理)
                loader: 'html-loader',

            }
        ]
    },

    // plugins 的配置
    plugins: [
        // 详细plugins的配置
        // html-webpack-plugin 默认会创建一个空的html,自动引入打包输出的所有资源(js/css)
        new HtmlWebpackPlugin({
            //复制 ./src/index.html 文件 并自动引入打包输出的所有资源(js/css)
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/build.css'
        }),

        // css 压缩
        new optimizeCssAssetsWebpackPlugin()

    ],

    // 模式
    mode: 'development', //开发模式
    // mode: 'production', //生产模式

    // 开发服务器 devServer 用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
    // 只会在内存中编译打包,不会有任何输出
    // 启动devServer 的指令为npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true,

    }

}

在我们的package.json文件中加入

"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_minni all"
    ]
  }