/**
* 功能:Webpack配置文件
* 日期:2017-11-24
**/
const webpack = require('webpack');
const path = require('path');
// CSS剥离
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
// CSS输出
const styles = new ExtractTextWebpackPlugin("css/[name].css");
// CSS压缩插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const cssPress = new OptimizeCssAssetsPlugin();
// js文件压缩
const compress = new webpack.optimize.UglifyJsPlugin({
comments: false,
compress: {
warnings: false
}
});
// html文件编译,每个html文件都需单独new一次然后指定路径
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlCompileIndex = new HtmlWebpackPlugin({
//输出路径
filename: 'index.html',
//输入路径
template: 'dev/index.html',
//指定本页面的js和css引用的文件,否则间全部引用
chunks: ['index','common'],
inject: 'body'
});
const HtmlCompileAdd = new HtmlWebpackPlugin({
template:'dev/pages/add.html',
filename:'pages/add.html',
chunks: ['add'],
inject: 'body'
});
const HtmlCompileChart = new HtmlWebpackPlugin({
template:'dev/pages/chart.html',
filename:'pages/chart.html',
chunks: ['chart'],
inject: 'body'
});
const HtmlCompileEdit = new HtmlWebpackPlugin({
template:'dev/pages/edit.html',
filename:'pages/edit.html',
chunks: ['edit'],
inject: 'body'
});
const HtmlCompileHome = new HtmlWebpackPlugin({
template:'dev/pages/home.html',
filename:'pages/home.html',
chunks: ['home'],
inject: 'body'
});
// 核心配置部分
module.exports = {
//资源映射文件配置
devtool: 'source-map',
//入口文件配置(多个文件入口写成json形式单个写成数组)单个路径写法entry:'路径'
entry: {
index:['webpack-dev-server/client?http://localhost:8089/','./dev/js/index.js'],
add:['webpack-dev-server/client?http://localhost:8089/','./dev/js/add.js'],
chart:['webpack-dev-server/client?http://localhost:8089/','./dev/js/chart.js'],
edit:['webpack-dev-server/client?http://localhost:8089/','./dev/js/edit.js'],
home:['webpack-dev-server/client?http://localhost:8089/','./dev/js/home.js'],
common:['webpack-dev-server/client?http://localhost:8089/','./dev/js/common.js']
},
//输出路径配置
output: {
//输出的路径文件名
path: path.resolve(__dirname, "build"),
//输出路径名字
filename: 'js/[name].js',
publicPath:'./'
},
//插件使用
module: {
rules: [
// less编译
{
test: /\.(less|css)$/,
use: ExtractTextWebpackPlugin.extract({
fallback: "style-loader",
use: "css-loader!less-loader"
})
},
// 图片资源编译 (webpack第二版写法)
{
test: /\.(gif|jpg|png)$/,
loaders: [
'url-loader?limit=8192&name=img/[name].[ext]'
]
},
//字体图表的处理
{
test: /\.(woff2?|svg|eot|ttf)$/,
loader: 'file-loader',
options: {
publicPath: 'build/',
name: 'fonts/[name].[ext]'
}
},
// 用babel编译js
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
//html编译
{
test: /\.html/,
loader: 'html-loader',
// 路径在实例化的时候定
}
]
},
//本地server配置
devServer: {
contentBase: path.resolve(__dirname, './'),//本地服务器所加载的页面所在的目录
port:8089,//本地服务端口配置
hot:true,
open:true,
historyApiFallback: true,//不跳转
inline: true,//实时刷新
publicPath: '/'
},
//插件调用
plugins: [styles,HtmlCompileIndex,HtmlCompileAdd,HtmlCompileChart,HtmlCompileEdit,HtmlCompileHome]
//插件调用(上线版压缩)
// plugins: [styles,HtmlCompileIndex,HtmlCompileAbout,cssPress,compress]
};
请输入代码
目录结构
浏览器能查看到css,样式都是正常的 但js就是不出来
html文件main中间那块是动态添加的