webpack配置-1--webpack.common.js

目录结构:

代码:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

//设置输入和输出根目录
const ROOT_PATH = path.resolve(__dirname);
const APP_PATH = path.resolve(ROOT_PATH, 'src');
const BUILD_PATH = path.resolve(ROOT_PATH, 'dist');

//循环生成每个入口文件对于的html
let entrys = {};
let HtmlWebpack = [];
const modules = [
'home'
]
modules.forEach(module => {
entrys[module] = ./src/modules/${module}
})
modules.forEach((item, index) => {
let chunks = ['commons', item];
//动态生成html插件
HtmlWebpack[index] = new HtmlWebpackPlugin({
filename: ./${item}.html, //生成的html存放路径，相对于 path
template: ./src/pages/temp.html,
chunks: chunks,
inject: true, //允许插件修改哪些内容，包括head与body
hash: true, //为静态资源生成hash值
minify: { //压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: false //删除空白符与换行符
}
})
});

const extractLess = new ExtractTextPlugin({
filename: "[name].[hash].css"
});

const commonPlugin = [
new webpack.optimize.CommonsChunkPlugin({
names: "commons",
filename: "commons.[hash].js",
minChunks: 2
}),
extractLess,
//拷贝资源插件
new CopyWebpackPlugin([{
from: path.resolve(APP_PATH, 'assets'),
to: path.resolve(BUILD_PATH, 'assets')
}])
]

const svgDirs = [
require.resolve('antd-mobile').replace(/warn.js$/, ''), // 1. 属于 antd-mobile 内置 svg 文件
path.resolve(__dirname, './src/assets/svg'), // 2. 自己私人的 svg 存放目录
];

module.exports = {
entry: entrys,
output: {
path: BUILD_PATH,
filename: '[name].[chunkhash].js'
},
module: {
rules: [{
test: /.js$/, //用babel编译jsx和es6
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /.(less|css)$/,
use: extractLess.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader', 'postcss-loader'],
})
}, {
test: /.svg$/i,
use: 'svg-sprite-loader',
include: svgDirs
},
{
test: /.(png|jpg|gif|jpeg)$/, //处理css文件中的背景图片
use: 'url-loader?limit=1&name=./static/assets/[name].[hash:4].[ext]'
//当图片大小小于这个限制的时候，会自动启用base64编码图片。减少http请求,提高性能
}
]},
resolve: {
modules: [
path.resolve(__dirname, "./src"),
"node_modules"
],
extensions: ['.web.js', '.js', '.less', '.jsx', '.json'],
alias: {
'assets': path.resolve(__dirname, './src/assets'),
'common': path.resolve(__dirname, './src/common')
}
},
plugins: HtmlWebpack.concat(commonPlugin)
}