1. webpack配置 --- 包含分离css文件
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
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",
inject:"body",
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
new ExtractTextPlugin('./css/[name].css'),
new OptimizeCSSPlugin({
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$/,
use:ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
}),
exclude:/node_modules/
},
{
test: /\.styl$/,
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'
}]);
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
to: '/dist'
}]);
3. clean-webpack-plugin 清除dist文件夹中重复的文件
new cleanWebpackPlugin(['dist/*'], {
root: path.resolve(__dirname, '../')
}),
技术收集来源
学什么网