2回答

• 

  慕瓜8179437

  2019-05-14 00:38:03

  const path = require('path')
  const VueLoaderPlugin = require('vue-loader/lib/plugin')
  const isDev = process.env.NODE_ENV === 'development';
  const HTMLPlugin = require('html-webpack-plugin');
  const webpack = require('webpack');
  // const ExtractPlugin=require('mini-css-extract-plugin')
  const ExtractPlugin=require('extract-text-webpack-plugin')
  // ExtractPlugin
  // const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  // 定义输出模块
  // module.exports
  const config  ={
  target:'web',
  // 拼接路径，使其成为绝对路径
  entry: path.join(__dirname,'./src/index.js'),
  output: {
      filename: 'bundle.js',
      path: path.join(__dirname,'./dist')
  },
  module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        {
          test: /\.css$/,
          use: [
          'style-loader',
          'css-loader'
          ]
        },
  {
  test:/\.styl(us)?$/,
          use: ExtractPlugin.extract({
          fallback: 'style-loader',
          use:[
            {loader:'css-loader'},
  {
  loader : 'postcss-loader',
  options:  {
  sourceMap: true,
  }
  },
            {loader:'stylus-loader'}
          ]
          })
  },
        {
          test: /\.jsx$/,
          loader: 'babel-loader'
        },
        {
          test: /\.(gif|jpg|jpeg|png|svg)$/,
          use: [
            {
              loader: 'url-loader',
              options:{
                limit: 1024,
                name: '[name].[ext]'
              }
            }
          ]
        }
      ]
  },
    plugins: [
  new webpack.DefinePlugin({
  
  'process.env': {
  NODE_ENV:isDev?'"development"' :'"production"'
  }
  }),
      // 请确保引入这个插件！
      new VueLoaderPlugin(),
      new HTMLPlugin(),
    ]
  }
  if (isDev) {
  //页面调试工具 
  config.devtool = '#cheap-module-eval-source-map'
  // 开发环境端口
  config.devServer = {
  port: 8000,
      host:'0.0.0.0',
      historyApiFallback:true,
      overlay: {
        errors:true,
      },
  // 热加载，只渲染改变的组件，不需要重新渲染整个页面
  // hot: true不要和new webpack.HotModuleReplacementPlugin()同时启用
  hot: true
  // open:true
  },
  // 热加载所需配置
  config.plugins.push(
      // new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    )
  }
  module.exports = config

  
  

  0 0
• 

  慕瓜8179437

  2019-05-14 00:35:44

  123
  

  0 0