vue打包css丢失,vue.js,css_vue2+webpack1.13打包时生成css内容丢失，vue.js,css,javascript

vue2+webpack1.13打包时生成css内容丢失

vue2+webpack1.13+vue-cli打包问题

package.json依赖：

"dependencies": {

"axios": "^0.15.3",

"vue": "^2.1.0",

"vue-infinite-scroll": "^2.0.0",

"vue-router": "^2.1.1",

"vuex": "^2.2.1"

"devDependencies": {

"autoprefixer": "^6.4.0",

"babel-core": "^6.0.0",

"babel-eslint": "^7.0.0",

"babel-loader": "^6.0.0",

"babel-plugin-transform-runtime": "^6.0.0",

"babel-preset-es2015": "^6.0.0",

"babel-preset-stage-2": "^6.0.0",

"babel-register": "^6.0.0",

"chalk": "^1.1.3",

"compression-webpack-plugin": "^0.3.2",

"connect-history-api-fallback": "^1.1.0",

"css-loader": "^0.25.0",

"eslint": "^3.7.1",

"eslint-config-airbnb-base": "^8.0.0",

"eslint-friendly-formatter": "^2.0.5",

"eslint-import-resolver-webpack": "^0.6.0",

"eslint-loader": "^1.5.0",

"eslint-plugin-html": "^1.3.0",

"eslint-plugin-import": "^1.16.0",

"eventsource-polyfill": "^0.9.6",

"express": "^4.13.3",

"extract-text-webpack-plugin": "^1.0.1",

"file-loader": "^0.9.0",

"function-bind": "^1.0.2",

"html-webpack-plugin": "^2.8.1",

"http-proxy-middleware": "^0.17.2",

"json-loader": "^0.5.4",

"node-sass": "^3.13.0",

"opn": "^4.0.2",

"ora": "^0.3.0",

"sass-loader": "^4.0.2",

"semver": "^5.3.0",

"shelljs": "^0.7.4",

"url-loader": "^0.5.7",

"vue-loader": "^10.0.0",

"vue-style-loader": "^1.0.0",

"vue-template-compiler": "^2.1.0",

"webpack": "^1.13.2",

"webpack-dev-middleware": "^1.8.3",

"webpack-hot-middleware": "^2.12.2",

"webpack-merge": "^0.14.1"

}

打包之前css如下：

.weui-flex {

display: -webkit-box;

display: -webkit-flex;

display: flex;

}

打包之后如下：

.weui-flex{display:-webkit-box;display:flex}

问题：发现display: -webkit-flex;丢失了。

在webpack.base.conf.js里面配置了autoprefixer如下：

vue: {

loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),

postcss: [

require('autoprefixer')({

browsers: ['last 8 versions'],

remove: false

})

]

}

尝试后，发现autoprefixer没有起作用

求大神指导！

注：

webpack.prod.conf.js如下

var path = require('path')

var config = require('../config')

var utils = require('./utils')

var webpack = require('webpack')

var merge = require('webpack-merge')

var baseWebpackConfig = require('./webpack.base.conf')

var ExtractTextPlugin = require('extract-text-webpack-plugin')

var HtmlWebpackPlugin = require('html-webpack-plugin')

var env = config.build.env

var entrys = require('./getentry');

var webpackConfig = merge(baseWebpackConfig, {

module: {

loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })

devtool: config.build.productionSourceMap ? '#source-map' : false,

output: {

path: config.build.assetsRoot,

filename: utils.assetsPath('js/[name].[chunkhash].js'),

chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

vue: {

loaders: utils.cssLoaders({

sourceMap: config.build.productionSourceMap,

extract: true

})

plugins: [

// http://vuejs.github.io/vue-loader/en/workflow/production.html

new webpack.DefinePlugin({

'process.env': env

}),

new webpack.optimize.UglifyJsPlugin({

comments: false, //去掉注释

compress: {

warnings: false

}

}),

new webpack.optimize.OccurrenceOrderPlugin(),

// extract css into its own file

new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),

// generate dist index.html with correct asset hash for caching.

// you can customize output by editing /index.html

// see https://github.com/ampedandwired/html-webpack-plugin

// new HtmlWebpackPlugin({

// filename: config.build.index,

// template: 'index.html',

// inject: true,

// minify: {

// removeComments: true,

// collapseWhitespace: true,

// removeAttributeQuotes: true

// // more options:

// // https://github.com/kangax/html-minifier#options-quick-reference

// },

// // necessary to consistently work with multiple chunks via CommonsChunkPlugin

// chunksSortMode: 'dependency'

// }),

// split vendor js into its own file

new webpack.optimize.CommonsChunkPlugin({

minChunks: function (module, count) {

// any required modules inside node_modules are extracted to vendor

return (

module.resource &&

/\.js$/.test(module.resource) &&

module.resource.indexOf(

path.join(__dirname, '../node_modules')

) === 0

)

}

}),

// extract webpack runtime and module manifest to its own file in order to

// prevent vendor hash from being updated whenever app bundle is updated

new webpack.optimize.CommonsChunkPlugin({

chunks: ['vendor']

})

]

})

if (config.build.productionGzip) {

var CompressionWebpackPlugin = require('compression-webpack-plugin')

webpackConfig.plugins.push(

new CompressionWebpackPlugin({

asset: '[path].gz[query]',

algorithm: 'gzip',

test: new RegExp(

'\\.(' +

config.build.productionGzipExtensions.join('|') +

')$'

threshold: 10240,

minRatio: 0.8

})

)

}

module.exports = webpackConfig

var pages = entrys.html;

console.log("prod pages-----");

for (var pathname in pages) {

console.log("filename:"+pathname + '.html');

console.log("template:"+pages[pathname]);

// 配置生成的html文件，定义路径等

var conf = {

filename: pathname + '.html',

inject: true, // js插入位置

minify:{ //

removeComments:true,

collapseWhitespace: true,

removeAttributeQuotes: true

chunksSortMode: 'dependency'

//chunks: [pathname, "vendor", "manifest"] // 每个html引用的js模块，也可以在这里加上vendor等公用模块

};

if (pathname in module.exports.entry) {

conf.chunks = ['manifest', 'vendor', pathname];

conf.hash = true;

}

// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象

module.exports.plugins.push(new HtmlWebpackPlugin(conf));

}

webpack.dev.conf.js如下

var path = require('path')

var config = require('../config')

var utils = require('./utils')

var projectRoot = path.resolve(__dirname, '../')

var entrys = require('./getentry');

var env = process.env.NODE_ENV

// check env & config/index.js to decide weither to enable CSS Sourcemaps for the

// various preprocessor loaders added to vue-loader at the end of this file

var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)

var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)

var useCssSourceMap = cssSourceMapDev || cssSourceMapProd

module.exports = {

entry: entrys.js,

output: {

path: config.build.assetsRoot,

publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,

filename: '[name].js',

chunkFilename: '[name].pie.js'

resolve: {

extensions: ['', '.js', '.vue'],

fallback: [path.join(__dirname, '../node_modules')]

resolveLoader: {

fallback: [path.join(__dirname, '../node_modules')]

module: {

loaders: [

{

test: /\.vue$/,

loader: 'vue'

{

test: /\.js$/,

loader: 'babel',

include: projectRoot,

{

test: /\.json$/,

loader: 'json'

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url',

query: {

limit: 10000,

}

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url',

query: {

limit: 10000,

}

]

eslint: {

formatter: require('eslint-friendly-formatter')

vue: {

loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),

postcss: [

require('autoprefixer')({

browsers: ['last 8 versions'],

remove: false

})

]

}

vue打包css丢失,vue.js,css_vue2+webpack1.13打包时生成css内容丢失，vue.js,css,javascript - phpStudy...