带你全面了解webpack的配置信息webpack.config.js---[基础配置]

vagabond370
167 阅读5分钟

前言

通常webpack打包我们需要新建一个webpack.config.js文件去配置一些打包的处理,例如去定义打包的主入口文件和出口文件等等

新建webpack.config.js文件

module.exports = {
   
}

打包入口entry

module.exports = {
    entry:'./src/a.js',
    //多入口打包
    entry:{
        index:'./src/a.js',
        other:'./src/other.js' 
    },
}

这里我们使用./src/a.js文件作为我们打包的主入口模块，而other为多入口打包

打包出口output

module.exports = {
    entry:'./src/a.js'
     output: {
        filename: 'bundle.js',//打包的文件名
        //当入口为多入口打包的时候,我们的打包文件名也要区分
        filename:'[name].js', //其中name为入口的属性名
        path: path.resolve(__dirname,'output')//打包的文件（注意这里需要使用绝对路径）
    }
}

这样打包后的文件就存储在了output文件下了，当入口为多入口打包的时候,我们的打包文件名也要区分filename:'[name].js'

image.png

插件:plugin

插件（plugins）：可以用于执行范围更广的任务。从打包优化和压缩，一直到重新定义环境中的变量等。通俗来说就是扩展webpack功能的.

例如html-webpack-plugin插件:他的作用就是根据模版产生一个打包后的html

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/sum.js',
    output: {
        filename: 'bundle.js',//打包的文件名
        path: path.resolve(__dirname,'output')//打包的文件（注意这里需要使用绝对路径）
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //模版
            filename:'bundle.html',//根据模版产生一个打包后的html的文件名
        })
    ]
}

这样就自动打包就产生了一个bundle.html文件，它里面引入了bundle.js文件，可以在浏览器中运行

image.png

而对于多入口的插件,我们在产生打包后的html文件必然是多个html文件,这是我们就要new出多个HtmlWebpackPlugin事例

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let htmlPlugins = ['index', 'other'].map(chunkName => { 
    return new HtmlWebpackPlugin({
        filename: `${chunkName}.html`,
        chunks: [chunkName] 
    })
})
module.exports = {
    entry: {
        index: './src/index.js',
        other: './src/other.js'
    },
    output: {
        filename: '[name].js',//打包的文件名
        path: path.resolve(__dirname,'output')//打包的文件（注意这里需要使用绝对路径）
    },
    plugins: [
        ...htmlPlugins,
    ]
}

如下是打包后的目录

image.png 又例如clean-webpack-plugin插件:可以把上次打包的出口文件夹下的冗余文件名清空

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    entry: './src/sum.js',
    output: {
        filename: 'bundle.js',//打包的文件名
        path: path.resolve(__dirname,'output')//打包的文件（注意这里需要使用绝对路径）
    },
    plugins: [
        new CleanWebpackPlugin(), //可以把上次打包的出口文件夹下的冗余文件名清空(默认全部清空)

        new HtmlWebpackPlugin({
            template: './src/index.html', //模版
            minify:{
                removeAttributeQuotes: true,
                collapseWhitespace:true
            },
            filename:'bundle.html',//根据模版产生一个打包后的html的文件名
        }),
    ]
}

devServer

devServer是开发环境下配置的，为了在开发下方便打开浏览器

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let htmlPlugins = ['index', 'other'].map(chunkName => { 
    return new HtmlWebpackPlugin({
        filename: `${chunkName}.html`,
        chunks: [chunkName] 
    })
})
module.exports = {
    entry: {
        index: './src/index.js',
        other: './src/other.js'
    },
    output: {
        filename: '[name].js',//打包的文件名
        path: path.resolve(__dirname,'output')//打包的文件（注意这里需要使用绝对路径）
    },
    // devServer（开发环境下配置）：
    devServer: {
        // 运行代码的目录
        contentBase: path.resolve(__dirname, "build"),
        // 为每个静态文件开启gzip压缩
        compress: true,
        host: "localhost",
        port: 5000,
        open: true, // 自动打开浏览器
        hot: true, //开启HMR功能
        // 设置代理
        proxy: {
            // 一旦devServer(5000端口)接收到/api/xxx的请求，就会用devServer起的服务把请求转发到另外一个服务器（3000）
            // 以此来解决开发中的跨域问题
            api: {
                target: "htttp://localhost:3000",
                // 发送请求时，请求路径重写：将/api/xxx  --> /xxx （去掉/api）
                pathRewrite: {
                    "^api": "",
                },
            },
        },
    },
    plugins: [
        new CleanWebpackPlugin(), //可以把上次打包的出口文件夹下的冗余文件名清空(默认全部清空)
        ...htmlPlugins,
        // new HtmlWebpackPlugin({
        //     template: './src/index.html', //模版
        //     minify:{
        //         removeAttributeQuotes: true,
        //         collapseWhitespace:true
        //     },
        //     filename:'bundle.html',//根据模版产生一个打包后的html的文件名
        // }),
    ]
}

在package.json中设置启动服务的脚本。终端中运行npm run dev

"scripts": {
        "build": "webpack",
        "dev":"webpack serve" //启动服务
  },

loader

loader主要是为了处理打包的非JS文件和json文件。

  • 处理CSS文件

    需要安装style-loader css-loader

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let htmlPlugins = ['index', 'other'].map(chunkName => { 
    return new HtmlWebpackPlugin({
        filename: `${chunkName}.html`,
        chunks: [chunkName] 
    })
})
module.exports = {
    entry: {
        index: './src/index.js',
        other: './src/other.js'
    },
    output: {
        filename: '[name].js',//打包的文件名
        path: path.resolve(__dirname,'output')//打包的文件（注意这里需要使用绝对路径）
    },
    plugins: [
        
        new CleanWebpackPlugin(), //可以把上次打包的出口文件夹下的冗余文件名清空(默认全部清空)
        ...htmlPlugins,
      
    ],
    module: {
        rules: [
             { test: /\.css$/i, use: ['style-loader','css-loader'] },
             { test: /\.css$/i,
               use: ['style-loader',{
                 loader:'css-loader',
                 options:{
                     modules:true;//实现css模块化
                 },
                 //loader分为三类:前置loader(pre),后置loader(post),普通loader
                enforce:'pre'
             }] };
         ],
    }
}

  • 处理css样式前缀

    需要安装postcss-preset-env postcss-loader

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let htmlPlugins = ['index', 'other'].map(chunkName => { 
    return new HtmlWebpackPlugin({
        filename: `${chunkName}.html`,
        chunks: [chunkName] 
    })
})
module.exports = {
    entry: {
        index: './src/index.js',
        other: './src/other.js'
    },
    output: {
        filename: '[name].js',//打包的文件名
        path: path.resolve(__dirname,'output')//打包的文件（注意这里需要使用绝对路径）
    },
    plugins: [
        
        new CleanWebpackPlugin(), //可以把上次打包的出口文件夹下的冗余文件名清空(默认全部清空)
        ...htmlPlugins,
      
    ],
    module: {
        rules: [
             { test: /\.css$/i, use: ['style-loader','css-loader'] },
             { test: /\.css$/i,
               use: ['style-loader',{
                 loader:'css-loader',
                 options:{
                     modules:true;//实现css模块化
                 },
                 //loader分为三类:前置loader(pre),后置loader(post),普通loader
                enforce:'pre'
             },'postcss-loader'] };
         ],
    }
}

这里还需要再配置postcss.config.js文件

module.exports = { plugins: [require('autoprefixer')] }
  • 处理less文件 需要安装less less-loader
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let htmlPlugins = ['index', 'other'].map(chunkName => { 
    return new HtmlWebpackPlugin({
        filename: `${chunkName}.html`,
        chunks: [chunkName] 
    })
})
module.exports = {
    entry: {
        index: './src/index.js',
        other: './src/other.js'
    },
    output: {
        filename: '[name].js',//打包的文件名
        path: path.resolve(__dirname,'output')//打包的文件（注意这里需要使用绝对路径）
    },
    plugins: [
        
        new CleanWebpackPlugin(), //可以把上次打包的出口文件夹下的冗余文件名清空(默认全部清空)
        ...htmlPlugins,
      
    ],
    module: {
        rules: [
             { test: /\.less$/i, use: ['style-loader', {
                loader:'css-loader',//处理import和url
                options:{
                    importLoaders:3 //import导入之前需要经过几个处理
                }
            }, {
                loader:'postcss-loader', //处理前缀
                options:{
                    postcssOptions:{
                        plugins:['autoprefixer']
                    }
                }
            },{
                loader:'px2rem-loader' //可以把px单位变成rem
                options:{
                    remUnit:75,//1rem对应75px
                    remPrecesion:8 //计算后的小数精度8位
                }
            }, 'less-loader'] }
         ],
    }
}

  • 处理图片打包的

    1. 当图片过大时,使用file-loader插件，需要安装file file-loader
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let htmlPlugins = ['index', 'other'].map(chunkName => {
    return new HtmlWebpackPlugin({
        filename: `${chunkName}.html`,
        chunks: [chunkName]
    })
})
module.exports = {
    entry: {
        index: './src/index.js',
        other: './src/other.js'
    },
    output: {
        filename: '[name].js',//打包的文件名
        path: path.resolve(__dirname, 'output')//打包的文件（注意这里需要使用绝对路径）
    },
    plugins: [

        new CleanWebpackPlugin(), //可以把上次打包的出口文件夹下的冗余文件名清空(默认全部清空)
        ...htmlPlugins,
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader','less-loader','postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'postcss-loader','less-loader']
            },
            {
                test: /\.(eot|svg|woff2|woff|ttf)/i, //一般像icon字体图标我们一般不把他们转换成base64
                use: {
                    loader: 'file-loader',
                }
            }

        ]
    }
}

2.当图片过小时，我们通常把其转换为base64形式。需要安装的插件url-loader

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let htmlPlugins = ['index', 'other'].map(chunkName => {
    return new HtmlWebpackPlugin({
        filename: `${chunkName}.html`,
        chunks: [chunkName]
    })
})
module.exports = {
    entry: {
        index: './src/index.js',
        other: './src/other.js'
    },
    output: {
        filename: '[name].js',//打包的文件名
        path: path.resolve(__dirname, 'output')//打包的文件（注意这里需要使用绝对路径）
    },
    plugins: [

        new CleanWebpackPlugin(), //可以把上次打包的出口文件夹下的冗余文件名清空(默认全部清空)
        ...htmlPlugins,
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader','less-loader','postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'postcss-loader','less-loader']
            },
            {
                test: /\.(jpg|png|webp|jpeg|gif|ico)/i,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 2000000,//大小在此限制范围内会转换成base64
                        name: 'img/[name].[ext]',
                        outputPath: 'img',//输出到某个文件夹中
                        // publicPath: 'http://www.zhufeng'//增加访问前缀
                    }
                }
            }

        ]
    }
}
  • 处理html文件带图片的情况 需要安装html-withimg-loader
module={
    rules:[
    {
                test: /\.html/,
                use:'html-withimg-loader'
            },
    ]
}
  • 处理JS文件 需要安装babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime @babel/runtime-corejs2``@babel/plugin-proposal-decorators core-js@3
module={
    rules:[
    {
                test: /\.js$/i,
               use: {
                    loader: 'babel-loader',//.babelrc
                    options: {
                        //帮你转换高版本的api语法
                        //不使用这种方式 你可以在代码中引进@babel/pollyfill
                        //装饰器不支持（@babel/plugin-proposal-decorators）
                        presets: [['@babel/preset-env', {
                            useBuiltIns: 'usage',//只转换使用的api
                            corejs: { version: 3 } //`core-js@3`
                        }]],
                        plugins: [
                        ['@babel/plugin-proposal-decorators', {
                            'legacy': true
                        }],
                        ['import',{libraryName:'antd'},style:'css']
                        ]//装饰器 类的属性
                        // plugins: ['@babel/plugin-transform-runtime']//将公共方法提到一起去

                    },

                },
                exclude: /node_modules/,
                include: path.resolve(__dirname, './src'),

            }
    ]
}
  • 校验代码规范eslint 需要安装eslint-loader ts-loader
  1. js处理
module={
    rules:[
    {
            test:/\.js$/,
            use:'eslint-loader',
            enforce:pre//默认在编译之前校验
        }
    ]
}
  1. ts处理
module={
   rules:[
  {
           test:/\.ts$/,
           use:'ts-loader'
       }
   ]
}

optimization

  • 压缩JS,CSS（适用于生产环境）
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let htmlPlugins = ['index', 'other'].map(chunkName => { 
    return new HtmlWebpackPlugin({
        filename: `${chunkName}.html`,
        chunks: [chunkName] 
    })
})
module.exports = {
    entry: {
        index: './src/index.js',
        other: './src/other.js'
    },
    output: {
        filename: '[name].js',//打包的文件名
        path: path.resolve(__dirname,'output')//打包的文件（注意这里需要使用绝对路径）
    },
    plugins: [
        
        new CleanWebpackPlugin(), //可以把上次打包的出口文件夹下的冗余文件名清空(默认全部清空)
        ...htmlPlugins,
      
    ],
    module: {
        rules: []
    },
    <!-- 处理js -->
    <!-- npm install terser-webpack-plugin --save-dev -->
    <!-- 处理css -->
    <!--  npm install css-minimizer-webpack-plugin --save-dev-->

     optimization: {
        minimizer: [
            new TerserPlugin(),
            new CssMinimizerPlugin()
        ],
    },
}
avatar
文章
阅读
粉丝