webpack核心及基本配置webpack.config.js

webpack的核心：

　　入口：entry

　　出口（输出）：output

　　loader：让webpack能够处理非js文件（webpack自身是只识别js的）

　　插件：plugins：大多数插件可以通过选项option自定义配置

 

webpack.config.js

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin") 

//定义入口文件路径及出口文件路径

const PATH = {
    dev:path.join(__dirname,"./src/main.js"),
    build:path.join(__dirname,"./dist")
}

//webpack的配置
module.exports = {
    mode:'development',//定义为开发环境还是生长环境
    //入口配置
    entry:{
        app:PATH.dev
    },
    output:{
        filename:"[name].js",//打包出去的名字等于入口配置里的名字(app)
        path:PATH.build
    },
    //配置loader  将浏览器不识别的一些语法转换成为浏览器识别的语法
    module:{
        //规则  一个对象就是一种一个规则 
        rules:[
            {
                test:/\.(js)$/,
                use:{
                    loader:"babel-loader",//js编译器 es6变为es5
                    options:{
                        presets:["@babel/env"]//安装依赖
                    }
                }
            },
            {
                test:/\.(css|scss)$/,
                //cssloader执行顺序是从右到左 从下到上
                use:["style-loader","css-loader","sass-loader"]
            },
            {//当图片的大小小于2008的时候用url-loader做解析，大于2008的时候用file-loader做解析。系统会自动去找file-loader
                //url-loader解析的时候回解析成base64的形式；file-loader会解析成原本的形式
                test:/\.(jpg|png|gif)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:2008 //自定义的
                    }
                }
            },
            {
                //配置文字的
                test:/\.(woff|svg|eot|ttf|woff2)$/,
                use:["url-loader"]
            },
            {
                //配置vue
                test:/\.vue$/,
                loader:'vue-loader'
            }
      ] 
    },
    plugins:[//插件     自动引入一个index.html  无须自己手动打包
        new htmlWebpackPlugin({
            filename:"index.html",
            template:"index.html",
            title:"Vue"
        }),
        new VueLoaderPlugin()
    ],
    devServer:{//当打开页面时会自动打开浏览器  webpack环境
                open:true
            }
}