webpack配置 包含分离css文件

1. webpack配置 --- 包含分离css文件

var path = require('path');

//将css文件分开打包的插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");

//压缩css文件
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');

//html模板
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
watch: false,
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-bundle.js'
},
plugins: [
new htmlWebpackPlugin({
filename:'index.html',
template:"index.html",           //传入自己传入的模板html
inject:"body",
minify: {
removeComments: true,          //压缩html文件
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
new ExtractTextPlugin('./css/[name].css'),    //指定css打包路径
new OptimizeCSSPlugin({                       //压缩css
cssProcessorOptions: {
safe: true
}
})
],
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname, './src'),           //指定打包范围
exclude: path.resolve(__dirname, './node_modules'),  //排除打包范围
},
{
test: /\.html$/,
loader: 'html-loader',
exclude:/node_modules/
},
{
test: /\.css$/,
//css打包配置
use:ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
}),
exclude:/node_modules/                      //这个是绝对路径
},
{
test: /\.styl$/,
//stylus打包配置
use:ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader!stylus-loader"
}),
exclude:/node_modules/
}
]
}

};

2. copy-webpack-plugin 在webpack中拷贝文件和文件夹

new CopyWebpackPlugin([{
from: __dirname + '/src/public'   //作用：把public 里面的内容全部拷贝到编译目录
}]);

new CopyWebpackPlugin([{
from: __dirname + '/src/public'   //作用：把public 里面的内容全部拷贝到编译目录
to: '/dist'
}]);

3. clean-webpack-plugin 清除dist文件夹中重复的文件

new cleanWebpackPlugin(['dist/*'], {
root: path.resolve(__dirname, '../')
}),