webpack.config.js配置（development&production）

E plus

于 2019-03-18 10:13:34 发布

阅读量1.3k

点赞数

分类专栏： Vue学习笔记文章标签：根据模式不同配置webpack.config.js

本文链接：https://blog.youkuaiyun.com/weixin_44290787/article/details/88633865

版权

本文详细介绍了如何根据不同模式配置webpack.config.js，包括development.config.js和production.config.js，以及核心的webpack.config.js文件的设置，确保项目在开发和生产环境下的优化构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

development.config.js

//引入html-webpack-plugin模块，目的是生成index.html模板
const HtmlWebpackPlugin=require('html-webpack-plugin');
//引入vue-loader中的plugin，才能成功编译.vue文件
const VueLoaderPlugin=require('vue-loader/lib/plugin');

module.exports={
 //模式为开发模式
  mode: 'development',
  //出口
  output: {
 	/*
	不需要输出，因为开发模式，编译的bundle.js文件输出内存里
	output: path.resolve(__dirname,'dest');
	*/
    filename: 'bundle.js'
  },
  //开启调试定位,若文件编译发生错误，定位到具体哪个文件
  devtool: 'source-map',
  
  plugins: [
  //以index.html为模板编译Html,避免每次都在index.html源文件中引入bundle.js文件
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    //调用Vue中的plugin，以便成功编译 .vue文件
    new VueLoaderPlugin()
  ]
};

production.config.js

const path=require('path');

const HtmlWebpackPlugin=require(

最低0.47元/天解锁文章