个回答

• 一只肥鹤

  2019-05-31 18:39:52

  const path = require('path');
  const VueLoaderPlugin = require('vue-loader/lib/plugin');
  
  const isDev = process.env.NODE_ENV === 'development'; /*package.json里面的dev判断*/
  
  const HTMLPlugin = require('html-webpack-plugin');
  const webpack = require('webpack');
  
  //css分离打包 mini-css-extract-plugin  extract-text-webpack-plugin@next
  const ExtractPlugin = require('extract-text-webpack-plugin');
  
  const config  = {
  //module.exports = {
      target: 'web',
      entry: path.join(__dirname,'./src/index.js'),
      output: {
          // filename: "bundle.js",
          filename: "bundle.[hash:8].js", /*正式环境与开发环境进行区分*/
          path: path.join(__dirname,'dist'),
      },
      module: {
          rules: [
              {
                  test:/\.vue$/,   /*使用vue-loader处理.vue文件*/
                  loader: 'vue-loader'
              },/*{
                  test: /\.css$/,
                  use:['style-loader','css-loader'],
              },*/
              {
                  test: /\.(jpg|jpeg|png|gif|svg)$/,
                  use: [{
                          loader:'url-loader',
                          options: {
                              limit:1024,
                              name:'[name]-picf.[ext]'
                          }
                      }]
              },{
                  test: /\.jsx$/,
                  loader: 'babel-loader'
              }
          ]
      },
      /*错误提示：asset(s) 最大限制在244K。解决：修改webpack 的性能提示配置 */
      performance: {
          hints:'warning',   /*或者直接关闭hints:false*/
          //入口起点的最大体积
          maxEntrypointSize: 50000000,
          //生成文件的最大体积
          maxAssetSize: 30000000,
          //只给出 js 文件的性能提示
          assetFilter: function(assetFilename) {
              return assetFilename.endsWith('.js');
          }
      },
      plugins:[
          new VueLoaderPlugin(), /*Vue-loader在15.*之后的版本的使用都是需要带有VueLoaderPlugin的，还需另外单独配置css-loader*/
          new webpack.DefinePlugin({
              'process.env':{
                  NODE_ENV : isDev?'"development"':'"production"'
              }
          }),
          /*如果'"development"'不加引号，那么最后解析会变成process.env.NODE_ENV=development，没有development这个变量 缺少引号*/
          new HTMLPlugin(),
      ],
  };
  
  if(isDev){
      config.devtool = '#cheap-module-eval-source-map';/*在浏览器上页面可以调试，不加的话是vue，es6等的编译代码*/
      config.devServer = {
          port:8001,
          host:'localhost',/*既可以通过localhost:8000访问到，又可以通过127.0.0.1:8000,别人也可以通过自己的ip访问到*/
          overlay:{
              errors:true /*有任何错误都显示到网页*/
          },
          hot:true /*原来修改东西 页面自动刷新  现在不刷新，只更新内容*/
          /*historyFallback:{ //单页应用的映射 }*/
         // open:true,/*修改文件后默认打开浏览器*/
      };
      config.plugins.push(
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoEmitOnErrorsPlugin(),
      );
      config.module.rules.push({
          test: /\.styl/,  /*注意这里没有$结束符，这样既可以匹配styl文件，又可以匹配stylus*/
          use: [
              'style-loader',
              'css-loader',
              {
                  loader: "postcss-loader",
                  options: {
                      sourceMap:true,
                  }
              },
              'stylus-loader'
          ]
      })
  }else{
      config.entry = {
          app: path.join(__dirname,'./src/index.js'),
          vendor:['vue']  /*将框架与业务代码单独打包，是浏览器尽可能久地缓存框架代码而不随着业务修改而刷新*/
      };
      config.output.filename = '[name].[chunkhash:8].js';
      config.module.rules.push({
          test: /\.styl/,
          use: ExtractPlugin.extract({
              fallback:'style-loader',
              use:[
                  'css-loader',
                  {
                      loader: "postcss-loader",
                      options: {
                          sourceMap:true,
                      }
                  },
                  'stylus-loader'
              ]
          })
      });
      config.plugins.push(
              new ExtractPlugin('styles.[chunkHash:8].css'),
      );
      config.optimization = {
          splitChunks: {
              cacheGroups: {
                  commons: {
                      chunks: 'initial',
                      minChunks: 2, maxInitialRequests: 5,
                      minSize: 0
                  },
                  vendor: {
                      test: /node_modules/,
                      chunks: 'initial',
                      name: 'vendor',
                      priority: 10,
                      enforce: true
                  }
              }
          },
          runtimeChunk: true
      }
  }
  
  module.exports = config;

  
  

  0

• 一只幸福的喵

  2019-01-05 23:20:53

  https://github.com/Evenyoo/vueInit

  0

• 佟舟

  2018-06-22 13:41:03

  找到解决方法了

  https://github.com/shystruk/create-react-redux-app-structure/blob/master/webpack.config.js

  1