环境是webpack 3，sass(.scss)
添加前缀需要用到的是sass-loader, posscss-loader, autoprefixer, css-loader。
webpack中的配置：
{ test:/\.scss$/, loader:ExtractTextPlugin.extract({ use:['css-loader?minimize','postcss-loader','sass-loader'] }), exclude:/node_modules/ }
我的项目中是需要在html中插入css文件的，所以是上面的写法。
postcss-loader默认会读取根目录下的postcss.config.js
postcss.config.js文件中的内容：
module.exports = { plugins: [ require('autoprefixer') ] };
需要在package.json中配置
"browserslist": [ "Firefox > 20", "iOS >= 7", "ie >= 8", "last 5 versions", "> 5%" ]
browserlist的配置参考：
https://github.com/ai/browserslist#queries
问题：
上面的配置，如果没有写Firefox >20则，生成的css文件，没有-moz-前缀了，因为firfox已经支持最新的css3了，并且已经超过了5个版本。
加上之后会有三个前缀，-webkit-, -moz-, -ms-
css3 浏览器的兼容性
http://www.runoob.com/cssref/css3-browsersupport.html
webpack.config.js
const webpack = require('webpack');
const WebpackDevServer = require("webpack-dev-server");
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackChunkHash = require("webpack-chunk-hash");
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanPlugin = require('clean-webpack-plugin'); //清理文件夹
function resolve(file){
return path.resolve(__dirname, file)
}
module.exports = {
// devtool:'eval-source-map',
entry:{
app:resolve('./src/app.js'),
vendor:['vue','vue-router','vuex']
},
output:{
path:resolve('./dist/'),
filename:'[name].js?v=[hash]',
publicPath:'/dist/',
//chunkFilename:'chunks/[name].js?v=[chunkhash:8]'
},
resolve:{
extensions:['.vue','.js'],
alias:{
'vue$':'vue/dist/vue.common.js'
}
},
plugins:[
//清空输出目录
//new CleanPlugin(['chunks'], {
// "root": resolve('./dist'),
// verbose: true,
// dry: false
//}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new UglifyJsPlugin({
sourceMap:false,
compress:{
warnings:false
}
}),
new CommonsChunkPlugin({
name:['vendor','manifest'],
minChunks: Infinity
}),
new HtmlWebpackPlugin({
template:resolve('./src/index.template.html'),
filename:resolve('./index.html'),
inject:'body',
// chunks:['app','vendor','runtime']
chunks:['manifest','app','vendor'],
hash: false,
}),
new ExtractTextPlugin({
filename:'bundle.css?v=[hash]',
allChunks:true,
disable:false,
publicPath:'/dist'
}),
//new WebpackChunkHash(),
//new webpack.HashedModuleIdsPlugin()
],
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader',
exclude:/node_modules/
},{
test:/\.js$/,
loader:'babel-loader?cacheDirectory',
exclude:/node_modules/,
options:"{presets:[['es2015', { modules:false }]]}"
},{
test:/\.scss$/,
loader:ExtractTextPlugin.extract({
use:['css-loader?minimize','postcss-loader','sass-loader']
}),
exclude:/node_modules/
},{
test:/\.css$/,
loader:ExtractTextPlugin.extract({
use:['css-loader?minimize']
})
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}
]
}
}
webpack.dev.js，这个
const webpack = require('webpack');
const WebpackDevServer = require("webpack-dev-server");
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackChunkHash = require("webpack-chunk-hash");
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanPlugin = require('clean-webpack-plugin'); //清理文件夹
function resolve(file){
return path.resolve(__dirname, file)
}
module.exports = {
devtool:'eval-source-map',
entry:{
app:resolve('./src/app.js'),
vendor:['vue','vue-router','vuex']
},
output:{
path:resolve('./dist/'),
filename:'[name].js?v=[hash]',
publicPath:'/dist/',
//chunkFilename:'chunks/[name].js?v=[chunkhash:8]'
},
resolve:{
extensions:['.vue','.js'],
alias:{
'vue$':'vue/dist/vue.common.js'
}
},
plugins:[
//清空输出目录
//new CleanPlugin(['chunks'], {
// "root": resolve('./dist'),
// verbose: true,
// dry: false
//}),
new UglifyJsPlugin({
sourceMap:true,
compress:{
warnings:false
}
}),
new CommonsChunkPlugin({
name:['vendor','manifest'],
minChunks: Infinity
}),
new HtmlWebpackPlugin({
template:resolve('./src/index.template.html'),
filename:resolve('./index.html'),
inject:'body',
// chunks:['app','vendor','runtime']
chunks:['manifest','app','vendor']
}),
new ExtractTextPlugin({
filename:'bundle.css?v=[hash]',
allChunks:true,
disable:false,
publicPath:'/dist'
}),
//new WebpackChunkHash(),
//new webpack.HashedModuleIdsPlugin()
new webpack.HotModuleReplacementPlugin()
],
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader',
exclude:/node_modules/
},{
test:/\.js$/,
loader:'babel-loader?cacheDirectory',
exclude:/node_modules/,
options:"{presets:[['es2015', { modules:false }]]}"
},{
test:/\.scss$/,
loader:ExtractTextPlugin.extract({
use:['css-loader?minimize','sass-loader']
}),
exclude:/node_modules/
},{
test:/\.css$/,
loader:ExtractTextPlugin.extract({
use:['css-loader?minimize']
})
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
devServer: {
historyApiFallback: true,
contentBase: "./",
publicPath: '/dist/',
compress: true,
quiet: false, //控制台中不输出打包的信息
noInfo: false,
hot: true, //开启热点
inline: true, //开启页面自动刷新
lazy: false, //不启动懒加载
progress: true, //显示打包的进度
host: 'xxx.com',
port: '8090', //设置端口号
//其实很简单的，只要配置这个参数就可以了
proxy: {
'/aaa/*': {
target: 'http://ccc.com:6080/',
secure: false
}
}
}
}
其中包括Babel的打包。
