webpack 配置（分离）

Posted 2021-03-18 lazypet

一、下列分别是base.config.js  dev.config.js prod.config.js

const path = require(‘path‘)
const webpack = require(‘webpack‘)
const htmlWebpackPlugin = require(‘html-webpack-plugin‘)
const UglifyjsWebpackPlugin = require(‘uglifyjs-webpack-plugin‘)
module.exports = {

    entry: ‘./src/main.js‘,
    output: {
        path: path.resolve(__dirname, ‘../dist‘),
        filename: ‘bundle.js‘,
        // publicPath: ‘dist/‘ //在dist文件中加载图片路径起作用
    },
    //这里是loader的配置 css
    module: {
        rules: [{
            test: /.css$/,
            use: [‘style-loader‘, ‘css-loader‘] //使用多个loader是,加载从右向左
        }, {
            test: /.less$/,
            use: [{
                loader: ‘style-loader‘
            }, {
                loader: ‘css-loader‘
            }, {
                loader: ‘less-loader‘
            }]
        }, {
            test: /.(png|jpg|gif|jpeg)/,
            use: [{
                loader: ‘url-loader‘,
                options: {
                    limit: ‘1300‘, //当图片大小小于limit时会将图片编译成base64字符串形式 单位是bit 依赖 url-loader
                    //当图片大于limit时依赖于file-loader and file-loader
                    name: ‘img/[name].[hash:8].[ext]‘ //中括号内存放变量 为file-loader打包的文件命名
                }

            }]
        }, { //这里是bable的配置 将es6转化为es5
            test: ‘/.js$/‘,
            exclude: /(node_modules|bower_components)/, //exclude 排除文件
            use: {
                loader: ‘babel-loader‘,
                options: {
                    presets: [‘es2015‘]
                }
            }
        }, { //缺少插件 vue-loader版本过高
            test: /.vue$/,
            use: [‘vue-loader‘]
        }]
    },

    resolve: { //resove 帮我们解决路径问题
        extensions: [‘.js‘, ‘.css‘, ‘.vue‘], //这样导入的时候就可以省略后缀了
        alias: { //alias:别名
            ‘vue$‘: ‘vue/dist/vue.esm.js‘ //通过别名，我们可以让webpack在打包的时候，不通过默认的方式去
                //找文件，而是通过指定的路径去找文件 如这里 我们用 vue的 runtime compaire版本代替 runtime only
        }
    },
    //
    plugins: [
        new webpack.BannerPlugin(‘最终版权归lazypet所有‘), //添加版权的插件 BannerPlugin
        //HtmlWebpackPlugin插件 功能自动生成一个index.html文件 将要打包的js文件自动通过script标签插入到body中
        new HtmlWebpackPlugin({
            template: ‘index.html‘
        })
        //压缩代码插件

    ],
    //webpack server配置 局部安装最好设置脚本

}

　　

const UglifyjsWebpackPlugin = require(‘uglifyjs-webpack-plugin‘)
const webpackMerge = require(‘webpack-merge‘)
const baseConfig = require(‘./base.config‘)
module.exports = webpackMerge(baseConfig, {
    plugins: [
        new UglifyjsWebpackPlugin()
    ]
})

　　

const webpackMerge = require(‘webpack-merge‘)
const baseConfig = require(‘./base.config‘)
module.exports = webpackMerge(baseConfig, {
    devServer: {
        contentBase: ‘./dist‘, //指明webpack server 服务的文件夹
        inline: true //是否实时的进行监听
            // port：端口号 默认在8080端口
            //historyApiFallback
    }

})