前端》使用webpack+vue从零开始打造前端项目(2020最新版)七--生产环境打包、提取公共代码--bilibili-2021年2月9日

一、生产环境

 

二、提取公共代码 webpack-merge

1、安装

npm install -D webpack-merge

2、创建build目录

创建三个文件

webpack.base.js：公共配置

const path = require('path')
// 引入vue-loader的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 引入webpack插件
const webpack=require('webpack')
module.exports = {
    entry: './src/mian.js',
   
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../dist')
    },
    module: {
        rules: [{//当遇到以vue结尾文件时，用vue-loader来打包
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {//当遇到以以下结尾文件时，用file-loader来打包
            test: /\.(jpg|jpeg|png|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]'
            },
        }, {//当遇到以以下结尾文件时，用 css-loader来打包
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
        }, {//stylus-loader
            test: /\.styl(us)$/,
            use: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']

        },]
    },
    // 插件
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new CleanWebpackPlugin(),
    ],
    // 别名设置
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    }
}

webpack.dev.js：开发环境配置

const baseConfig=require('./webpack.base.js')
const {merge} =require('webpack-merge')

// 引入webpack插件
const webpack=require('webpack')
const devConfig = {
    mode: 'development',
     devServer:{
        contentBase:'./dist',
        open:true,
        hot:true
    },
 
    // 插件
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
}

module.exports=merge(baseConfig,devConfig)

webpack.prod.js：生产环境配置

const baseConfig=require('./webpack.base.js')
const {merge} =require('webpack-merge')

const prodConfig = {
    mode: 'production',
}
module.exports=merge(baseConfig,prodConfig)

3、修改配置

在package.json中：
            "scripts": {
                "dev": "webpack-dev-server --config ./build/webpack.dev.js",
                "build": "webpack --config ./build/webpack.prod.js"
            },
注意修改这个路径，__dirname是代表build目录，如果想要dist目录在根目录，是要在build目录上一级
                output: {
                        filename: 'bundle.js',
                        path: path.resolve(__dirname, '../dist')
                    },

4、测试

        运行：npm run dev 
        运行：npm run build