webpack打包遇到的一些问题

webpack打包后背景图片未正常引入路径

const target = "bundles";
const extractTextPlugin = new ExtractTextPlugin({
  filename: path.join("", "[name].[contenthash].css")  //前设置为空,引入的路径便不会引入bundles
});

配置路径需要注意输出路径和输入路径的配置是否一致

webpack打包后z-index设置无效默认为1

new OptimizeCssAssetsPlugin({
      cssProcessor: require("cssnano"),
      cssProcessorOptions: {
        discardComments: {
          removeAll: true
        },
        safe: true  //设置为安全,避免cssnano重新计算
      },
      canPrint: true
    })

cssnano 将 z-index归类为 unsafe，而不是 bug，只有在单个网页的 css 全部写入一个 css 文件，并且不通过 JavaScript 进行改动时是 safe。

webpack打包成功后,浏览器报错

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
解决办法:

module.exports = {
    // ...
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },
    ...

webpack4+中vue-loader不起效果

解决办法:

加载插件
var VueLoaderPlugin = require('vue-loader/lib/plugin');