原创

Webpack基本配置

const path = require('path');
const webpack = require('webpack');
const htmlplugin = require('html-webpack-plugin');
const Uglify = require('uglifyjs-webpack-plugin');

module.exports = {
  //入口
  entry: './src/main.js',
  //出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
    // publicPath: 'dist/'
  },
  module: {
    rules: [
        //处理css文件的loader配置
      {
        test: /\.css$/,
        // css-loader 只负责加载 不能解析,style-loader负责解析并且渲染到Dom元素上
        use: ['style-loader', 'css-loader']
      },
        //处理less文件的loader
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "less-loader"
          }
        ]
      },
        //处理文件相关的loader配置
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use:[
          {
            loader: 'url-loader',
            options:{
              limit: 8000, //当加载的图片大小 大于limit指定的大小时,需要使用file-loader
              name: 'img/[name].[hash:8].[ext]' //打包后的命名规则  文件名/[原来的文件名].[哈希值8位].[原来的后缀]
            }
          }
        ]
      },
        //es6 转 es5的loader配置
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use:{
          loader: 'babel-loader',
          options:{
            presets:['es2015']
          }
        }
      },
        //vue 解析loader配置
      {
        test: /\.vue$/,
        use:['vue-loader']
      }
    ]
  },
  //配置Vue 指定文件路径与版本
  resolve:{
    //组件化导入时 可省略后缀名的配置
    extensions:['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  //配置plugin 版权
  plugins:[
      new webpack.BannerPlugin('最终版权归L所有'),
      //在dist文件内创建index模板 根据src下的index.html作为模板
      new htmlplugin({
        template: 'index.html'
      }),
      //对js文件进行压缩
      new Uglify()
  ],
  //配置 本地服务器
  devServer: {
    contentBase : './dist',
    inline: true, //是否实时监听
  }
};

Vue
前端

留言板