手动配置webpack（config文件）

项目文件目录：

base.config.js：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")//webpack的插件
const {CleanWebpackPlugin} = require("clean-webpack-plugin")//需解构
const webpack = require("webpack")
const PATH = {//入口文件
    app:path.join(__dirname,"../src/main.js"),//__dirname是找到当前文件模块的路径
    bulid:path.join(__dirname,"../dist")//打包/出口文件
}


const webpackConfig = {
    entry:{
        app:PATH.app
    },
    output:{
        filename:"[name].js",
        path:PATH.bulid
    },
    resolve:{//别名
        extensions:[".js",".json",".vue"],//优先查找该文件，使得在引入时不用再写后缀名
        alias:{

         }
    },
    plugins:[//插件
        //热模块加载，当Css改变时，页面不进行刷新，但是数据样式改变
        new webpack.HotModuleReplacementPlugin(),     
        new HtmlWebpackPlugin({//自动生成一个模板文件
            filename:"index.html",//打包后的文件名称
            template:"index.html"//模板文件的名称
        }),
        new CleanWebpackPlugin() //内部是一个数组，dist是将dist内的内容清空

    ],
    module:{//识别模块，将浏览器不识别的模块做一个处理
        //规则
        rules:[//一个对象就是一个配置项
            {//js,jsx
               test:/\.(js|jsx)$/,//遇到js或者jsx用babe-loader
               use:{
                loader:"babel-loader",
                options:{
                    presets:["@babel/react"]//解析react语法
                }
               }
            },
            {//img
               test:/\.(jpg|png|gif|svg)$/,
               use:{
                   loader:"url-loader",
                   options:{
                       limit:2000,
                       name: '[name].[ext]',
                       outputPath:"img"//打包之后的存放路径   文件夹名
                   }
               }
            },
            {//字体
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: [
                        {
                          loader: 'url-loader',//file-loader也可以
                          options: {//字体图标打包到哪里去
                                name: '[name].[ext]',
                                outputPath:"font"
                          }
                            }//项目设置打包到dist下的fonts文件夹下
                     ]
              },
        ]
    }
}

module.exports = webpackConfig;

build.config.js：

//生产环境
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpackMerge = require("webpack-merge");
const baseConfig = require("./base.config")

const webpackConfig = webpackMerge(baseConfig,{
    mode:"production",//生产环境
    module:{
        rules:[
            {
                test:/\.(css|scss)$/,
                   //css抽离
                use:ExtractTextPlugin.extract({
                    use:[
                        "css-loader" ,
                        {
                           loader:"postcss-loader",
                           options:{
                               path:"./postcss.js"
                           }
                        },
                        "sass-loader"
                    ],
                    fallback:"style-loader"
                        
                }),
                
            }
        ]
    },
    plugins:[
     
        new ExtractTextPlugin({
            filename:"[name][hash].css"//定义分离出来的Css文件名
        })
    ]
})

module.exports = webpackConfig;

 

dev.config.js

//开发环境


const webpackMerge = require("webpack-merge")
const baseWebpackConfig = require("./base.config.js");


module.exports = webpackMerge(baseWebpackConfig,{
    mode:"development",
    module:{
        rules:[
            {
                test:/\.(css|scss)$/,
                use:["style-loader","css-loader",{
                    loader:"postcss-loader",
                    options:{
                        path:"./postcss.js"
                    }
                },"sass-loader"]
            }
        ]
    },
    devServer:{ 
        //配置
        open:true,
        port:9999,
        hot:true,//热重载  css更改后页面不刷新
        proxy:{}//跨域
    }
})

.babelrc

{
    "presets": [
     [
        "@babel/preset-env",
       {
          //表示编译出的代码想要支持的浏览器版本
          "targets": {
            //浏览器配置表
            "browsers": ["last 2 versions"]//兼容两个版本之后的浏览器
         }
       }
     ]
   ],
    "plugins": ["@babel/plugin-transform-runtime"]
 }

postcss.js

module.exports = {
    plugins: [
        require('autoprefixer')({//添加浏览器前缀
            
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
            ],
            grid: true
        })
    ]
};