webpack的配置

时间:2020-03-08
本文章向大家介绍webpack的配置,主要包括webpack的配置使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

webpack.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:"bunble.js",
    //publicPath:"dist/"
  },
  module: {
    rules: [
       {test: /\.css$/, 
        use: ['style-loader','css-loader'] 
      },
      {
        test:/\.less$/,
        use:[
          {loader:"style-loader"},
          {loader:"css-loader"},
          {loader:"less-loader"}
        ]
      },
        {
          test:/\.(png|jpg|gif)$/,
          use:[{loader:"url-loader",
          options:{
          limit:13000,
          name:'img/[name].[hash:8].[ext]'
        },
        
        }]
       },{
         test:/\.js$/,
         exclude:/(node_modules|bower_components)/,
         use:{
           loader:"babel-loader",
           options:{
             presets:["es2015"]
           }
        }
       },{
         test:/\.vue$/,
         use:['vue-loader']
       }
      
    ]
  },
  resolve:{
    extensions:[".js",'.vue','.css'],
    alias:{
      "vue$":"vue/dist/vue.esm.js"
    }
  },
  plugins:[
    new webpack.BannerPlugin('最终版权归我所有'),
    new HtmlWebpackPlugin({
      template:"index.html"
    }),
    //new UglifyjsWebpackPlugin()
  ],
  devServer:{
    contentBase:'./dist',
    inline:true
  }
}

原文地址:https://www.cnblogs.com/wxy0715/p/12442532.html