}
}
return { //返回css类型对应的loader组成的对象 generateLoaders()来生成loader
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
插件配置
plugins: [
new webpack.DefinePlugin({ // 编译时配置的全局变量
'process.env': config.dev.env //当前环境为开发环境
}),
new webpack.HotModuleReplacementPlugin(), //热更新插件
new webpack.NoEmitOnErrorPlugin(), //不触发错误,即编译后运行的包正常运行
new HtmlWebpackPlugin({ //自动生成html文件,比如编译后文件的引入
filename: 'index.html', //生成的文件名
template: 'index.html', //模板
inject: true
}),
new FriendlyErrorsPlugin() //友好的错误提示
]webpack.prod.conf.js
生产环境下的webpack配置，通过merge方法合并webpack.base.conf.js基础配置
module的处理,主要是针对css的处理
同样的此处调用了utils.styleLoaders
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
}
输出文件output
output: {
//导出文件目录
path: config.build.assetsRoot,
//导出的文件名
filename: utils.assetsPath('js/[name].[chunkhash].js'),
//非入口文件的文件名，而又需要被打包出来的文件命名配置,如按需加载的模块
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}
插件plugins
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var env = config.build.env
plugins: [
new webpack.DefinePlugin({
'process.env': env //配置全局环境为生产环境
}),
new webpack.optimize.UglifyJsPlugin({ //js文件压缩插件
compress: { //压缩配置
warnings: false // 不显示警告
},
sourceMap: true //生成sourceMap文件
}),
new ExtractTextPlugin({ //将js中引入的css分离的插件
filename: utils.assetsPath('css/[name].[contenthash].css') //分离出的css文件名
}),
