webpack4入门 打包基础配置文件

详细步骤

1.安装webpack4

npm i webpack@4

2.安装webpack-cli

npm i webpack-cli

3.按需安装所需loader和plugin插件

npm i mini-css-extract-plugin html-webpack-plugin -D//安装html模板插件 与将css重新整合插件
-D 将包写入到开发模式中，package文件中可见，
npm i css-loader less-loader less -D//安装css less语法转化所需loader
npm i babel-loader @babel/preset-env @babel/core -D//安装es6语法转换所需loader与核心库

运行打包

npx webpack //打包完成后可在dist文件夹看见对应的打包文件

配置代码如下

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");//html 模板打包插件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//css 打包后导入到新css文件
module.exports={
    mode:"development",//开发模式
    entry:'./src/js/index.js',//入口地址 **按自己项目情况配置**
    output:{
        path:path.resolve(__dirname +'/dist'),//路径必须是一个绝对路径
        filename:"bundle.js"//打包后的文件名
    },
    devServer:{//服务器配置
        port:"3000", //指定端口
        contentBase:"./dist"//配置默认路径
    },
    module:{
        rules:[//规则
            { test:/\.js$/,use:[
                    {
                        loader:"babel-loader",//使用loader
                        options:{
                            presets:[
                                "@babel/preset-env",//导入preset-env库 进行es6语法转换
                            ]
                     },
                      
                    },
                ]
            },
            { test:/\.less$/,use:[//less 转换配置
                    // 'style-loader',//将css放入业内style
                    MiniCssExtractPlugin.loader,//通过插件将css放入新的css
                    'css-loader','less-loader']
            },//转化less
            { test:/\.css$/, use:[ //css 转化配置
                    // 'style-loader',//引用css(解析import语法) style loader 将css放入style
                    MiniCssExtractPlugin.loader,//抽离为link  不通过style标签存放
                    'css-loader']
            }
        ]//
    },
    plugins:[//插件
        new HtmlWebpackPlugin({
            template: './src/index.html',//模板地址 **html页面所在地址**
            filename: "index.html",//导出html名称
            minify:{
                removeAttributeQuotes:false,//去除引号
                collapseWhitespace:false,//代码单行
            }
        }),
        new MiniCssExtractPlugin({//
            filename:"main.css"//导出文件名
        }),
    ],

};

配置webpack本地服务器

安装服务器插件

npm i webpack-dev-server -D

配置本地服务器

  devServer:{//服务器配置
        port:"3000", //指定端口
        contentBase:"./dist"//配置默认路径
    },

运行服务器并打开

npx webpack-dev-server
即可在 预览地址 http://localhost:3000/ 查看