package.json:
{
"name": "webpackTest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"app": "webpack-dev-server --inline --hot",
"dev": "set NODE_ENV=dev&&webpack",
"test": "set NODE_ENV=test&&webpack",
"pro": "set NODE_ENV=pro&&webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.1.1",
"underscore": "^1.8.3"
},
"devDependencies": {
"css-loader": "^0.26.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.24.1",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"uglify-js": "^2.7.4",
"url-loader": "^0.5.7",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
webpack.config.js:
/**
* Created by Administrator on 2016/11/28 0028.
*/
/*webpack适合SPA(单页面应用)使用*/
var webpack=require(‘webpack‘);
var ExtractTextPlugin=require(‘extract-text-webpack-plugin‘);
var extractCss=new ExtractTextPlugin(‘css/[name].css‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports={
entry :{
app: __dirname +"/src/js/index.js",
/*方括号里引用了node_modules里相应模块*/
lib:[‘jquery‘,‘underscore‘]
},/*入口文件*/
output:{
path:__dirname +"/assets/",/*输出路径*/
filename:‘js/index.js‘,/*输出的文件名*/
publicPath:‘http://192.168.1.108:7777/assets‘/*缓存区域,调试或上线时使用*/
},
/*webpack-dev-server服务器配置*/
devServer:{
contentBase:"./",/*根目录*/
host:"192.168.1.108",/*本机地址*/
port:‘7777‘,/*端口设置*/
color:true/*颜色设置*/
},
/*模块设置*/
module:{
/*设置文件用什么loader去读取*/
loaders:[
/* {
test:/\.css$/,*//*正则匹配*//*
loader:‘style-loader!css-loader‘*//*!是连接符,文件解释器*//*
},*/
{
test:/\.css$/,
loader:extractCss.extract(‘style-loader‘,‘css-loader‘)
},
{
test:/\.less$/,
loader:‘style!css!less‘
},
{
test:/\.json$/,
loader:‘json‘
},
{
test:/\.(gif|jpg|png)$/,
/*图片资源在加载时先压缩,当图片小于7KB时转成base64格式内嵌进去以减少http请求数,当图片大于7kb时,则会在/assets/images/下生成压缩后的图片*/
loader:‘url-loader?limit=7000&name=/images/[hash:6].[name].[ext]‘
}
]
},
/*插件*/
plugins:[
new webpack.HotModuleReplacementPlugin(),/*热插拔*/
extractCss,
new HtmlWebpackPlugin({
title:‘leyi‘,
filename:‘../home.html‘,
template:__dirname+‘/src/tpl/indexTpl.html‘,
inject:‘body‘/*把模板生成到body标签最下面*/
}),
/*js压缩*/
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
/*把一个全局变量插入到所有的代码中*/
new webpack.ProvidePlugin({
$:‘jquery‘
}),
/*抽取某些JS文件单独另打包成一个JS文件,一般抽取公共JS打包成一个共享的JS文件*/
new webpack.optimize.CommonsChunkPlugin("lib","js/lib.js")
],
resolve:{
//查找modules从这里开始查找,可以是本地某个地方,也可以是远程网络地址获取模块
root:‘f:/webpackTest/‘,
//自动扩展文件后缀名,require模块的时候可以不用写后缀了
extensions:[‘‘,‘.js‘,‘.json‘,‘.less‘],
//模块别名定义,require的时候写别名就可以了,定义好后就不用写长长的地址了
alias:{
happy:"externalModules/happy.js",
funy:"src/js/funy.js"
}
},
/*自动监控*/
watch:true
};
/*先在package.json里配置开发、测试、生产环境运行命令(注意空格问题),根据运行的命令设置相应操作*/
if(process.env.NODE_ENV===‘dev‘){
console.info(‘执行的是开发环境‘);
}else if(process.env.NODE_ENV===‘test‘){
console.info(‘执行的是测试环境‘);
}else{
console.info(‘执行的是生产环境‘);
}
Demo:
http://files.cnblogs.com/files/leyi/webpackTestDemo.rar
原文:http://www.cnblogs.com/leyi/p/6120160.html