关于网页开发webpack基本配置.

摘要: 这个webpack本程序员花了好几个晚上来配置的,费了好多的时间,中间的坑实在太多,最主要的是网上的教程还不对.现在用来分享,如果大家觉得有帮助的,可以随时下载拿去用.

/**
* Created by Administrator on 2017/5/29.
*/
var webpack = require("webpack");
var htmlWebpackPlugin = require("html-webpack-plugin");

var ExtractTextPlugin  = require("extract-text-webpack-plugin");
//nodejs的里的一个全局变量,它指向的是我们项目的根目录,入口文件的位置
module.exports = {
// devtool: "eval-source-map",
//配置入口文件
entry: {
index: __dirname + '/app/main.js',
//   index2:__dirname + '/app/main2.js',
// index3:__dirname + '/app/main3.js',
},

output: {
//需要打包后的文件 放置的位置
path: __dirname + '/public',
//打包后文件的名字
filename: 'js/[name].js',
// filename: 'js/[name]-[chunkhash].js',
// publicPath: "http://www.xianianwang.com" //用来上线时候输出的前缀
},

devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
// stats:{
//     colors: true,//终端中输出结果为彩色---没有颜色了
// },
// historyApiFallback: true,//不跳转
inline: true,//实时刷新
port: 8080,
// hot:true
},
module: {
loaders: [
{
test: /\.json$/,
use: 'json-loader'
},
//处理页面中以ejs为结尾的文件
{
test:/\.ejs$/,
use:'ejs-loader'
},
//处理页面中以html为结尾的文件,使用了这个插件,ejs中的变量将不再有效果
{
test:/\.html$/,
use:'html-loader'
},
//下面这个插件会将页面中的变量解析为正常的html文件,如何要在页面中使用htmlwebpackplugin变量则需要注释这个插件
// {
//   test: /\.css$/,
//   //从右向左翻译,css-loader必须在右边,不然没办法执行style-loader
//   use:[
//     'style-loader', 'css-loader',
//     {
//     loader: "postcss-loader",
//     options:{
//       plugins: (loader) => [
//         require('autoprefixer')
//         ],
//         minimize:true
//     }
//   }]
// },
//处理图片
{
test:/\.(png|jpg|git|woff)/,
use: [
//将图片输出到images的目录之下如何大小在8192之下则打包成base64,如果在这这之前刚保存到./images 之下
{
loader: "url-loader?limit=8192?name=[name].[hash:6].[ext]&publicPath=./&outputPath=images/"
},
//压缩图片的大小
{
loader: "image-webpack-loader"
}
]
},
//将es6的代码转为es5的代码
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
//将css独立出来
{ test: /\.css$/,
loader: ExtractTextPlugin.extract({fallback :'style-loader',
use:[
{
loader : 'css-loader'
},
//给css添加前缀
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [
require('autoprefixer')({
browsers:['last 5 versions']
}),
],
minimize:true
}
}
]}) }
],
},
plugins: [
new ExtractTextPlugin({filename: 'css/[name].css'}),//样式压缩
//创建一个新的页面在public 以app/index.html中的文件为依据
//   生产环境下启用：压缩js代码
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
mangle: false,

}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new htmlWebpackPlugin({
filename: 'index.html',
template: "app/index.html",
title:"webpack title",
inject: 'body',
date:new Date(),
minify: {
removeComments: true,    //移除HTML中的注释
// collapseWhitespace: true,    //删除空白符与换行符
conservativeCollapse: true,
minifyJS: true //js也在一行
},
// hash: true,
// chunks: ['index'],
// xhtml: true,
// showErrors: true
}),
// new htmlWebpackPlugin({
//   filename: 'b.html',
//   template: "app/index.html",
//   title:"webpack b.html",
//   inject: 'head',
//   chunks:['index2']
// }),
// new htmlWebpackPlugin({
//   filename: 'c.html',
//   template: "app/index.html",
//   title:"webpack c.html",
//   inject: 'head',
//   chunks:['index3']
// }),
// new webpack.HotModuleReplacementPlugin()
],
};
// var htmlWebpackPlugin=new htmlWebpackPlugin();

所有的源码在 :http://git.oschina.net/kaykie/webpackmoban

希望对你们有帮助,可以的话 给加个星啊