webpack配置分离

 

1.配置

1.插件安装

npm install webpack-merge@4.0.0 --save-dev

2.build新建文件夹

将webpack.config.js代码CV进这三个文件并作删减，最后删除webpack.config.js文件

（1）base.config.js

因为base引入dist文件夹位置变换了所以因改为

   path: path.resolve(__dirname, '../dist'),//动态获取打包后的文件路径,path.resolve拼接路径

 

//1.导入node的path包获取绝对路径，需要使用npm init初始化node包
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
​
//2.配置webpack的入口和出口
module.exports = {
  entry: './src/main.js',//入口文件
  output: {
    path: path.resolve(__dirname, '../dist'),//动态获取打包后的文件路径,path.resolve拼接路径
    filename: 'bundle.js',//打包后的文件名
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,//正则表达式匹配css文件
        //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }]//使用loader
      },
      {
        test: /\.less$/,//正则表达式匹配css文件
        //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }, {
          loader: 'less-loader'//less文件loader
        }]//使用loader
      },
      {
        test: /\.(png|jpg|gif)$/,//匹配png/jpg/gif格式图片
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,//图片小于8KB时候将图片转成base64字符串，大于8KB需要使用file-loader
              name: 'img/[name].[hash:8].[ext]'//img表示文件父目录，[name]表示文件名,[hash:8]表示将hash截取8位[ext]表示后缀
            }
          }
        ]
      },
      {
        test: /\.js$/,
        //排除node模块的js和bower的js
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            //如果要使用@babel/preset-env这里需要在根目录新建一个babel的文件
            // presets: ['@babel/preset-env']
            //这里直接使用指定
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader'
        }
      }
    ]
  },
  resolve: {
    //alias:别名
    //git commit -m'注释'
    // git c ''
    //alias
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins:[
    new webpack.BannerPlugin('最终版权归你爹我所有'),
    new HtmlWebpackPlugin({
      template:'index.html'
    }),
]
 
}
​

（2）dev.config.js

const baseConfig = require("./base.config");
const webpackMerge = require('webpack-merge');
module.exports = webpackMerge(baseConfig,{
  devServer:{
    contentBase:'./dist',     //为哪一个文件夹提供本地服务，默认根文件夹，这里填写./dist
    inline:true   //页面实时刷新
  }
 
})

(3)prod.config.js

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

2.运行

npm run build