个回答

• qq_小心翼翼_0

  2018-06-01 00:14:32

  估计是你loader 没配置好

   

  我用的是 webpack 4.8.1 的，我把webpack.config.js贴给你，你比较一下

  /** * webpack.config * powr by frend * @type {{}} */const path = require('path');const VueLoaderPlugin = require('vue-loader/lib/plugin')const HtmlPlugin = require('html-webpack-plugin')const webpack = require('webpack')//const ExtractPlugin = require('extract-text-webpack-plugin')const MiniCssExtractPlugin = require("mini-css-extract-plugin");const isDev = process.env.NODE_ENV === "development"const config  = {    target: 'web',    entry: path.join(__dirname,'src/index.js'),    output: {        filename: 'bundle.js',        path: path.join(__dirname,'/dist/')    },    mode: "development",    watch: false,    module:{        rules:[            {                test: /\.vue$/,                loader: 'vue-loader'            },            {                test: /\.jsx/,                loader: 'babel-loader'            },            {                test: /\.css$/i,                use:[                    {                        loader: 'style-loader'                    },                    {                        loader: 'css-loader'                    }                ]            },            {                test: /\.(gif|jpg|jpeg|png|svg)$/i,                use: [                    {                        loader: 'url-loader',                        options: {                            limit: 1024,                            name: '[name]-[hash:5].[ext]'                        }                    }                ]            }        ]    },    plugins: [        new VueLoaderPlugin(),        new webpack.DefinePlugin({ // 设定项目的运行环境，在js代码中可以引用到（类似于一个很大的全局变量）           'process.env': {               NODE_ENV: isDev ? '"development"' : '"production"'           }        }),        new HtmlPlugin({            filename: './index.html',            template: './src/index.html'        })    ]}if(isDev) {    config.module.rules.push({ //开发环境的配置        test: /\.styl$/i,        use: [            'style-loader',            'css-loader',            {              loader: 'postcss-loader',              options: {                sourceMap: true              }            },            'stylus-loader'        ]    })    config.devtool = "#cheap-module-eval-source-map", //方便在页面上以原始模式展示 js脚本    config.devServer = {        port: 8000,        host: '0.0.0.0', //监听的ip 0.0.0.0 可以通过 localhost | 127.0.0.0 | 内网IP也可以访问        overlay: {            errors: true, //编译时 如果有错误，显示在网页上        },        hot: true //组件级更新页面，false时为整个页面刷新 注意，这个需要 HotModuleReplacementPlugin 来配合    }    config.plugins.push(        new webpack.HotModuleReplacementPlugin(), //组件级更新页面        new webpack.NoEmitOnErrorsPlugin() // 不知道干啥    )} else {  config.entry = { //库文件与业务逻辑拆分之配置1    app: path.join(__dirname,'src/index.js'),    vendor: ['vue']  }  config.output.filename= '[name].[chunkhash:8].js'  config.module.rules.push({    test: /\.styl$/i,      use: [          MiniCssExtractPlugin.loader,'css-loader',          {            loader: 'postcss-loader',            options: {              sourceMap: true            }          },          'stylus-loader'      ]  })  config.plugins.push(    // new ExtractPlugin('styles.[contentHash:8].css')    new MiniCssExtractPlugin({      filename: 'style.[contentHash:8].css',      chunkFilename: '[id].css'    }),    // new webpack.optimize.CommonsChunkPlugin({ //库文件与业务逻辑拆分之配置2    //   name: 'vendor'    // })  )  config.optimization = {    splitChunks: {      name: 'vendor'    }  },  config.optimization = {    splitChunks: {      name: 'runtime'    }  }}module.exports = config;

  
  

  0