webpack初学体验

初体验

• 感觉非常的高大上的东西
• 它是静态资源打包工具
• 入手后，个人觉得混乱，又爱又恨
• 感觉需要踩的坑比较多
• 不同版本的模块使用上有改变，这是我感觉特别难受的地方。
• 但是webpack作为前端的核心内容之一，一定有着存在的道理，我会慢慢摸索，探寻的。

上手

• webpack有5大核心
  entry output module plugins mode
• 它的作用就是把所有资源都做一个连接拼接

第一段代码

const { resolve } =require('path');

const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.(png|gif|jpg)$/,
                loader:'file-loader',
                options:{
                    limit:8*1024,
                    // esModule:false
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader',
                options:{
                    esModule:false
                }
            }
        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    // mode:'development'
    mode:'production'
};
/*
版本
"webpack": "^5.31.0",
"webpack-cli": "^4.6.0", 这个版本如果使用devServer，会报错
*/

避坑指南01

• 在html内使用图片，html的options必须加上esModule:false，否则显示的图片是错误的
• 使用webpack-dev-server会报错可能是因为webpack-cli的版本太高了，不兼容导致的，可以安装3.3.12版本的webpack-cli，经过测试有效。

css处理相关代码

/**
 * npm i css-loader style-loader -D 安装css的基础处理模块
 * npm i html-plugin -D 安装html处理模块
 * npm i mini-css-extract-plugin 安装css打包模块
 * npm i optimize-css-assets-wenpack-plugin 安装css压缩模块
 * npm i postcss-loader postcss-preset-env 安装css兼容性处理模块
 */

 /*
 * css兼容性处理模块需要在package.json配置信息内添加
 "browserslist":{
    "develpment":[
      "last 1 chrome version",
      "last 1 firefox version",
      "lasr 1 safari version"
    ],
    "production":[
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
 * 然后在webpack.config.js内的模块module内添加webpack5
    {
        loader:'postcss-loader',
        options:{
            postcssOptions:{
                plugins:['postcss-preset-env']
            }
        }
    }
 */


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');

// 设置node的运行环境
// 默认的生成环境production
process.env.NODE_ENV='development';

module.exports={
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    // 将css文件放到html文件的head标签内
                    // 'style-loader',
                    // 将css打包提取为一个单独的css文件
                    // 插件的配套
                    miniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            postcssOptions:{
                                plugins:['postcss-preset-env']
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        // 设置一个默认的html文件
        new htmlWebpackPlugin({
            template:'./src/index.html'
        }),
        // 将css打包提取为一个单独的css文件插件
        new miniCssExtractPlugin({
            filename:'./css/style.css'
        }),
        // 将css文件压缩的插件
        new optimizeCssAssetsWebpackPlugin()
    ],
    mode:'development'
}