webpack 文件的简单配置

// webpack  的安装
// 第一次进行全局的安装（全局的安装是为了提供指令）
// npm install webpack -g 
// npm install webpack-cli -g 
// npm install webpack-dev-server -g 
// 第二次本地安装( 本地安装是为了在项目开发中使用)
// npm install webpack   安装完成  输入 webpack -v 查看版本号
// webpack 配置文件时  webpack.config.js   要像定义接口一样定义配置


// webpack  没有内置的服务器   需要 安装  webpack-dev-serve  模块
// 跟 webpack  一样  提供了 webpack-dev-server  指令 ，所以要安装两次：全局安装，本地安装
// 安装完成  通过  webpack-dev-server -v 查看 版本号
// 进入项目  输入  webpack-dev-serve  即可启动服务器




// 配置  webpack 
module.exports = {
    // 模式
    mode: 'development',
    // 给服务器端发布
    target: 'node',
    // 解决问题
    target: {
        // 别名
        alias: {
            "vue$": 'vue/dist/vue.js',
            '@': path.join(parocess.cwd(), './home/src'),
            '@v': path.join(process.cwd(), './home/src/views'),
            '@c': path.join(process.cwd(), './home/src/components')
        },
        // 拓展名
        extensions: ['.vue', '.js']
    },
    // 入口
    entry: "./home/src/entry.server.js",
    // 发布
    output: {
        // 文件名
        filename: "[name].js",
        // 发布到 state  目录下
        path: process.cwd(),
        // 将 ES Module 规范编译成 Commonjs 规范
        libraryTarget: 'commonjs2'
    },
    // 定义模块
    module: {
        // 定义加载机
        rules: [
            // vue
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // css 加载机
            {
                test: /\.css$/,
                use: ['css-loader']
            },
            // less 加载机
            {
                test: /\.less$/,
                use: [
                    'css-loader',
                    'less-loader'
                ]
            },
            // scss 加载机
            {
                test: /\.scss$/,
                use: [
                    'css-loader',
                    'sass-loader'
                ]
            },
            // 当前版本的 webpack 可以编译  es6 和 es module 
            // 在过去要配置加载机
            {
                test: /\.js$/,
                loader: 'babel-loader',
                // 表示 babel-loader 的其他配置
                options: {
                    // 编译器
                    presets: ['@babel/preset-env']
                }
            }
        ]
    },
    // 插件
    plugins: [
        // vue 插件
        new VueLoaderPlugin(),
        // 发布文件
        new VueServerRenderer({
            filename: './server/bundle.json'
        })
    ]
}