const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; //提取公共库
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
const CW_NODE_ENV = process.env.CW_NODE_ENV;
let config = {
devtool: "#source-map",
entry: {},
output: {
path: path.resolve(__dirname, 'static'), //编译的目录
filename: 'scripts/[name].js',
publicPath: '/', //发布目录
chunkFilename: "scripts/chunks/[name].chunk.js" // 用于异步加载require.ensure使用
},
resolve: {
alias: {}
},
module: {
rules: [
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!less-loader'
})
},
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&publicPath=/&outputPath=images/' // <= 8kb的图片base64内联
},
/*{
test: /\.html$/,
loader: 'html-loader'
}*/
]
},
plugins: [
new CommonsChunkPlugin({
name: 'vender',
filename: 'scripts/[name].js'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(CW_NODE_ENV || 'production') // production/development
}),
new ExtractTextPlugin({
filename: 'styles/[name].css'
}),
//需要暴露到全局使用的vendor列表
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
};
// 页面添加处理
let entry = {
'vender': [
'jquery',
'echarts',
'./src/scripts/common.js'
]
};
const files = fs.readdirSync('src/pages');
for (let i = 0, len = files.length; i < len; i++) {
const file = files[i];
const fileName = file.substring(0, file.lastIndexOf('.html'));
if (fileName) {
const isExists = fs.existsSync(`src/scripts/${fileName}.js`);
const chunks = ['vender'];
if (isExists) {
entry[fileName] = `./src/scripts/${fileName}.js`;
chunks.push(fileName);
}
config.plugins.push(
new HtmlWebpackPlugin({
filename: `${fileName}.html`,
template: `src/pages/${fileName}.html`,
chunks: chunks
}));
}
}
config.entry = entry;
if (CW_NODE_ENV == 'production') {
config.plugins.push(
new UglifyJsPlugin({
compress: {
warnings: false
}
})
);
}
module.exports = config;
{
"name": "bty",
"version": "0.0.1",
"description": " ",
"main": "index.js",
"scripts": {
"start": "webpack --progress --colors",
"build": "CW_NODE_ENV=production webpack --progress --colors",
"dev": "webpack-dev-server --content-base ./static --config webpack.config.js --inline --compress --hot --progress --colors --profile --port 8080",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"bty",
"data"
],
"author": " ",
"dependencies": {
"echarts": "^3.7.2",
"jcanvas": "^20.1.2",
"jquery": "^3.2.1"
},
"devDependencies": {
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"script-loader": "^0.7.1",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2"
}
}