webpack常用的打包配置

·  阅读 1085

webpack打包

webpack在项目根目录创建一个webpack.config.js文件

webpack.config.js

主要有五个属性

module.exports = {
    entry:"",
    output:{
        filename:"", // 输出的文件名
        path:"" // 文件输出的位置
    },
    module:{
        rules:{
            text:'正则表达式', // 处理匹配到的文件
            exclude:"", // 处理没有匹配到的文件
            exclude: /node_modules/, // 排除node_modules文件下的文件
            use:[ // 执行顺序从下到上 从右到左
                'css-loader',
                { // 要对某一个loader进行详情配置时
                   loader:"postcss-loader",
                   options:{ 
                     
                   }
                }
            ], // 使用个loader时使用这个属性
            loader:"", // 假如只用到一个loader时可以用这个
            enforce:"pre", // 如果有多个loader同时处理这个表示先执行这个loader
            // 只有一个loader时就可以直接使用options对其进行配置
            options:{
            }
            
        }
    }, // 加载不同格式文件的方式
    plugins:[], // 加载不同的插件
    mode:"", // 环境 (development || production)
    // 这个是用来生成临时文件的服务
    // 需要安装webpack-dev-server
    // 命令:npm i webpack-dev-server -D
    // 开发服务器devserver:用来自动化
    // 特点:只会在内存中编译打包 不会有任何输出
    // 启动devServer指令为:npx webpack-dev-server
    devServer:{
        contentBase:resolve(__dirname, 'built'),
        // 启动GZIP压缩
        compress:true,
        // 端口号
        port:3000,
        // 自动打开浏览器
        open:true
    }
}
复制代码

下面有打包css less html 字体文件 图片

css所需loader

style-loader、css-loader

module: {
    rules: [{
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader',
        ],
    },]
}
复制代码

less所需loader

要先安装less插件 style-loader、css-loader、less-loader

module: {
    rules: [{
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader',
            'less-loader',
        ],
    },]
}
复制代码

字体文件和图片所需loader

file-loader、url-loader

module: {
    rules: [
            {
                test: /\.(jpg|png|gif|jpe1g)$/,
                use: [{
                    loader: "file-loader",
                    options: {
                    // 图片小于8kb 就会被base64处理
                    // 优点:能减少请求数量
                    // 确定:图片体积会更大
                    limit:102400,
                    //  解析时出现[object Module]时配置esModule: false
                    // name: utils.assetsPath('img/[name].[hash:7].[ext]'),
                    // outputPath: "media/" 可以将文件输出到某个固定的目录
                }
            },
            {
                // exclude:/\.(css|js|html|jpg|png|gif|jpeg)$/, 这里是指排除这几种格式的文件
                test: /\.ttf$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: "[hash:4].[ext]",
                        outputPath: "media/"
                    }
                }]

            }
        ],
   },]
}
复制代码

html所需loader

html-loader

以某个html文件为模板输出

html-webpack-plugin

npm i html-webpack-plugin -D
复制代码
const HtmlWebpackPlugin = require("html-webpack-plugin")
plugins:[
  new HtmlWebpackPlugin({
            template: "./index.html",
            minify:{
                // 移除空格
                collapseWhitespace:true,
                // 移除注释
                removeComment:true
            }
        }),
]
复制代码

提取css成单独文件

一般在打包之后css会被直接混入js文件通过这个插件可以让css单独输出出来 mini-css-extract-plugin

npm i mini-css-extract-plugin -D
复制代码
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
]
module: {
    rules: [{
            test: /\.css$/,
            use: [
                ...commonCssLoader,
            ]
        },
        {
            test: /\.less$/,
            use: [
                ...commonCssLoader,
                'less-loader',

            ]
        },
    }
},
plugins:[
    new MiniCssExtractPlugin({
        // 对输出的文件重命名
        filename:"css/built.css",
    })
]
复制代码

css兼容

npm i postcss-loader postcss-preset-env -D

帮 postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式

const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    // css兼容性 需要在package.json中定义browserslist
    /*
    "browserslist": {
        "development": [
          "last 1 chrome vesion",
          "last 1 firefox vesion",
          "last 1 safari vesion"
        ],
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ]
      }*/
    {
        loader: "postcss-loader",
        options: {
            postcssOptions: {
                plugins: [
                    [
                        'postcss-preset-env',
                        {
                            ident: "postcss"
                        },
                    ],
                ],
            }
        }
    }
]
rules: [{
    test: /\.css$/,
    use: [
        ...commonCssLoader,
    ]
},
{
    test: /\.less$/,
    use: [
        ...commonCssLoader,
        'less-loader',

    ]
},]
复制代码
package.json
"browserslist":{
    // 设置nodejs环境变量;
    // process.env.NODE_ENV = 'devlopment';
    // 开发环境 =》 设置node环境变量: process.env.NODE_ENV = devlopment
    "development":[
        "last 1 chrome vesion", //兼容最近的一个chrome
        "last 1 firefox vesion", //兼容最近的一个firefox
        "last 1 safari vesion", //兼容最近的一个safari
    ],
    "production":[
        ">0.2%",
        "not dead",
        "not op_mini all"
    ]
}
复制代码

压缩css

optimize-css-assets-webpack-plugin

npm i optimize-css-assets-webpack-plugin -D
复制代码
const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
plugins:[
  new optimizeCssAssetsWebpackPlugin()
]
复制代码

js兼容性处理

1、 js兼容性处理:babel-loader @babel/preset-env @babel/core 还是不支持 promise

2、 全部js兼容性处理 --> @babel/polyfill 使用方式 import "@babel/polyfill"

3、 需求做兼容性处理的就做 : 按需处理 --》 core-js

使用之后就可以把上面import "@babel/polyfill"删掉了 一般是1和3结合使用 babel-loader @babel/preset-env @babel/core @babel/polyfill

module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:"babel-loader",
                options:{
                    // 预设:指示babel做怎么样的兼容性处理
                    // presets:['@babel/preset-env']
                    presets:[
                       [
                            '@babel/preset-env',
                            {
                                // 按需加载
                                useBuiltIns: 'usage',
                                // 指定core-js版本
                                corejs: {
                                    version: 3
                                },
                                targets: {
                                    chrome: "60",
                                    firebox: "60",
                                    ie:'9',
                                    safari: '10'
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    }
复制代码

js 设置 eslint语法校验 使用 airbnb

所需插件 eslint eslint-config-airbnb-base eslint-loader eslint-plugin-import

{
    test: /\.js$/,
    exclude: /node_modules/,
    // 优先执行
    enforce: "pre",
    loader: "eslint-loader",
    options: {
        // 对js语法规范自动修复
        fix: true
    }
},
复制代码

在package.json中添加

"eslintConfig": {
    "extends": "airbnb-base"
}
复制代码

完整文件

{
    test: /\.html$/,
    // 处理html文件中img图片
    loader: "html-loader"
},
复制代码
const {
    resolve
} = require("path");

process.env.NODE_ENV = 'production'; // 打包的环境


const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 压缩css

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin"); // css兼容性

const HtmlWebpackPlugin = require("html-webpack-plugin"); // html插件

const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    // css兼容性 需要在package.json中定义browserslist
    /*
    "browserslist": {
        "development": [
          "last 1 chrome vesion",
          "last 1 firefox vesion",
          "last 1 safari vesion"
        ],
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ]
      }*/
    {
        loader: "postcss-loader",
        options: {
            postcssOptions: {
                plugins: [
                    [
                        'postcss-preset-env',
                        {
                            ident: "postcss"
                        },
                    ],
                ],
            }
        }
    }
]
module.exports = {
    entry: './index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'built')
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    ...commonCssLoader,
                ]
            },
            {
                test: /\.less$/,
                use: [
                    ...commonCssLoader,
                    'less-loader',

                ]
            },
            /*
                正常来说 一个文件只能被一个loader处理
                当一个文件要被多个loader处理,那么一定要制定loader执行的先后顺序
                先执行eslint 再执行babel
                可以对其中一个loader添加一个属性 enforce:"pre"
            */
            // js 设置 eslint语法校验 使用 airbnb
            /*
            在package.json中添加
            "eslintConfig": {
                "extends": "airbnb-base"
            }
            */
            // {
            //     test: /\.js$/,
            //     exclude: /node_modules/,
            //     // 优先执行
            //     enforce: "pre",
            //     loader: "eslint-loader",
            //     options: {
            //         // 对js语法规范自动修复
            //         fix: true
            //     }
            // },
            // js兼容性处理
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            // 1、兼容部分语法 不包括promise
                            // 2、全部js兼容性处理 -->  @babel/polyfill  使用方式 import "@babel/polyfill"
                            // 3、 需求做兼容性处理的就做 : 按需处理 --》 core-js 使用之后就可以把上面import "@babel/polyfill"删掉了
                            // 这里用的是1和3
                            {
                                // 按需加载
                                useBuiltIns: 'usage',
                                // 指定core-js版本
                                corejs: {
                                    version: 3
                                },
                                targets: {
                                    chrome: "60",
                                    firefox: "60",
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]

                    ]

                }
            },
            // {
            //     test: /\.(jpg|png|gif|jpeg)$/,
            //     loader: 'url-loader',
            //     options: {
            //         limit: 8 * 1024,
            //         name: "[hash:10].[ext]", // 图片名称
            //         outputPath: 'imgs', // 图片输出的目录
            //         esModule: false, // 防止html中直接引用的图片链接错误
            //     }
            // },
            {
                test: /\.html$/,
                loader: "html-loader",
            },
            // {
            //     exclude: /\.(jpg|png|gif|jpeg|html|js|less|css)$/,
            //     loader: 'file-loader',
            //     options: {
            //         outputPath: 'media', // 这些文件的输出目录
            //     }
            // }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/built.css", // 将css从js中抽离出来
        }),
        new OptimizeCssAssetsWebpackPlugin(), // 压缩css
        new HtmlWebpackPlugin({
            template: "./index.html", // 输出的模板文件
            minify: {
                // 压缩html
                collapseBooleanAttributes: true,
                // 去除注释
                removeComments: true,
            }
        })
    ],
    mode: "production"
}
复制代码

package.json

{
  "name": "webpackcs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.14.8",
    "@babel/preset-env": "^7.14.8",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.0.0",
    "eslint": "^7.31.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.23.4",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "mini-css-extract-plugin": "^2.1.0",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "postcss-loader": "^6.1.1",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^3.1.0",
    "webpack": "^5.44.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "browserslist": {
    "development": [
      "last 1 chrome vesion",
      "last 1 firefox vesion",
      "last 1 safari vesion"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
},
"eslintConfig": {
    "extends": "airbnb-base"
}

复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改