webpack.prod.conf.js
"use strict";
const path = require('path');
const webpack = require('webpack');
//引入webpack开发环境配置参数
const prodConf = require('../config').build;
//引入webpack基本配置
const baseConf = require('./webpack.base.conf');
//一个webpack配置合并模块,可简单的理解为与Object.assign()功能类似!
const merge = require("webpack-merge");
//一个创建html入口文件的webpack插件!
const HtmlWebpackPlugin = require("html-webpack-plugin");
//一个抽离出css的webpack插件!
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//一个压缩css的webpack插件!
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
//一个拷贝文件的webpack插件!
const CopyWebpackPlugin = require("copy-webpack-plugin");
// 资源路径
function assetsPath(dir) {
return path.join(prodConf.assetsPath, dir)
}
const prod = merge({}, baseConf, {
output: {
//Build后所有文件存放的位置
path: path.resolve(__dirname, '../dist'),
//html引用资源路径,可在此配置cdn引用地址!
publicPath: prodConf.publicPath,
//文件名
filename: assetsPath('js/[name].[chunkhash].js'),
//用于打包require.ensure(代码分割)方法中引入的模块
chunkFilename: assetsPath('js/[name].[chunkhash].js')
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ["css-loader", "postcss-loader"],
fallback: "vue-style-loader"
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: ["css-loader", "less-loader", "postcss-loader"],
fallback: "vue-style-loader"
})
}
]
},
plugins: [
//将整个文件复制到构建输出指定目录下
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, "../static"),
to: prodConf.assetsPath,
ignore: [".*"]
}
]),
new ExtractTextPlugin({
filename: assetsPath('css/[name].[contenthash].css')
}),
// new ExtractTextPlugin('style.css'),
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, '../dist/index.html'),
template: 'index.html',
favicon: path.resolve(__dirname, '../favicon.ico'),
inject: true,
})
]
})
module.exports = prod
当我使用 ExtractTextPlugin 打包时便会报以下错误
但我不使用 ExtractTextPlugin来打包css 就不会报错,能正常打包
style.css
// removed by extract-text-webpack-plugin 的地址
请问是哪里写错了吗,我还重新下载了几次这个模块,也不管用
语法错误, 将
style.css
中的// xxxx
注释 改成/* xxxx */