webpack 开发环境的基本配置

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

1.1 创建配置文件 (webpack.config.js)

const path = require('path');
module.exports = {
    // 模式
    mode: 'none',
    // 入口
    entry: './src/main.js',
    // 出口
    output: {
        // 拼接路径 __dirname './dist/' 返回值为拼接好的路径
        path: path.join(__dirname, './dist/'),
        filename:'bundle.js'
    }
}

1.2 打包样式资源(即处理 css 文件)

a、所用 Loader 包：
    css-loader style-loader
b、具体代码：
    module: {
        rules: [
            {
                // 用来处理css文件
                test: /\.css$/,     // 匹配哪些文件
                use:["style-loader","css-loader"]    // 使用哪些 loader 进行处理
            }
        ]
    }

1.3 打包 HTML 资源(即处理 html 文件)

a、所用插件：
    html-webpack-plugin
b、具体实现：
    // 配置插件
    plugins: [
        new htmlWebpackPlugin({
            template:"./index.html"
        })
    ]

1.4 打包图片资源

a、所用 Loader 包：
    file-loader
b、具体实现：
    // 配置 Loader 规则
    module: {
        rules: [
            {
                // 用来处理图片
                test: /\.(png|jpg|gif)$/,
                use:["file-loader"]
            }
        ]
    }

1.5 打包 jsx/Es6 文件

a、所用包文件
    babel-loader @babel/preset-env
b、具体实现
    module: {
        rules: [
            {
                // 用来处理 jsx/es6 文件不兼容问题
                test: /\.m?js$/,
                exclude: /node_modules/,     // 排除哪个文件
                use: {
                    loader: "babel-loader",
                    options: {
                        presets:['@babel/preset-env']
                    }
                }
            }
        ]
    }

1.6 devserver

a、作用：
    代码自动更新，不需要频繁打包
b、编码：
    devServer: {
        // 项目构建后路径
        contentBase: './dist',
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true
    }

2、打包 Vue 资源

2.1 所用 Loader 包：

vue-loader

2.2 所用插件包：

vue-loader/lib/plugin

2.3 基本配置

(1) 配置 Loader
module: {
    rules: [
        {
            // 用来处理vue文件
            test: /\.vue$/,     
            use:["vue-loader"]    
        }
    ]
}
(2) 配置 插件
plugins: [
    new VueLoaderPlugin(),
]

2.4 解决报错

(1) 方法一(改 main.js 文件)
    import App from './App.vue'
    import Vue from 'vue/dist/vue'      // 第一种改这里：路径写全

    new Vue({
        el: "#app",
        template: '<App/>',
        components: {
            App
        }
    })
(2) 方法二(改webpack.config.js)
    resolve: {
            alias: {
                'vue$':'vue/dist/vue.js'
            }
    }   // 第二种 手写替换完整路径
(3) 方法三(改 main.js 文件)
    import App from './App.vue'
    import Vue from 'vue'

    new Vue({
        el: "#app",
        // 第三种
        render:h => h(App)
    })
【总结】: 
    1、前两种方法旨在更换路径，弊端在于打包上线时文件太大，并未从根本上解决
    2、第三种方法解决了 vue运行文件 打包可正常显示的问题 并且没有改变文件大小

2.5 实现组件自动更新

(1) 第三方包：webpack
    const webpack = require('webpack');  
(2) 配置插件
    plugins: [
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin() // 用于组件更新
    ]
(3) 配置代理
    devServer: {
        contentBase: './dist',
        hot:true    // 用于组件更新
    }