webpack 基础

1、webpack 五个核心概念

(1) 入口(Entry)

指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

(2) 输出(Output)

指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

(3) Loader

Loader 让 webpack 能够去处理那些 非avaScript 文件 (webpack自身只理解 JavaScript)

(4) 插件(Plugins)

可以用于执行范围更广的任务。

插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

(5) 模式(Mode)

指示 webpack 使用相应模式的配置。

    development -- 开发模式

    production -- 生产模式

2、webpack 开发环境的基本配置

const path = require('path');

module.exports = {
    // 模式
    mode: 'none',

    // 入口
    entry: './src/main.js',
    
    // 出口
    output: {
        // 拼接路径 __dirname './dist/' 返回值为拼接好的路径
        path: path.join(__dirname, './dist/'),
        filename:'bundle.js'
    },

    // Loader 
    module: {
        rules: [
            {
                // 用来处理css文件
                test: /\.css$/,     // 匹配哪些文件
                use:["style-loader","css-loader"]    // 使用哪些 loader 进行处理
            },
            {
                // 用来处理图片
                test: /\.(png|jpg|gif)$/,
                use:["file-loader"]
            },
            {
                // 用来处理 jsx/es6 文件不兼容问题
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets:['@babel/preset-env']
                    }
                }
            },
            {
                // 用来处理vue文件
                test: /\.vue$/,     
                use:["vue-loader"]    
            }
        ]
    },

    // 插件
    plugins: [
        new htmlWebpackPlugin({
            template:"./index.html"
        }),
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin() // 用于组件更新1
    ],
    
    // 代理服务器
    devServer: {
        // 项目构建后路径
        contentBase: './dist',
        // 用于组件更新1
        hot:true
    }
}