Webpack简介
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。
它是高度可配置的,但是,在开始前你需要先理解四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)。 —— [ webpack中文官网 ]
Webpack环境配置
nodeJs环境安装
1、安装node.js,请至nodejs.cn下载最新nodejs版本—— [nodeJS官网链接]
2、nodejs安装教程网上有很多,这里就不赘述了,推荐查看—— [Node.js 安装配置]
Webpack环境安装
1、这里我们使用npm包进行webpack安装环境配置
npm install -g–save webpack //全局安装webpack
2、webpack插件安装
html-webpack-plugin
npm install -g–save html-webpack-plugin //安装html-webpack-plugin用于压缩HTML代码
html-loader
npm install -g–save html-loader//安装html-loader用于解析HTML代码
glob
npm install -g–save glob//用于对文件的路径进行处理
类似还有相关插件
webpack-dev-server
babel
babel-core
babel-loader
babel-preset-es2015
babel-runtime
less-loader
uglify-js
url-loader
css-loader
less-loader
sass-loader
….
这里就不在赘述,依照上面逐个npm即可
Webpack实战Demo演示
常见项目路径
-
biz(源码文件夹)
- index(html,less,js….)
- login
- ……. dist(用于存放压缩后文件)
- css
- font
- image
- js
- …… src(资源文件路径)
- font
- framework
- image
- less
- …….
webpack.config配置
代码块语法遵循标准的Commonjs规范的模块代码,例如:
//引入webpack模块
var webpack = require('webpack');
//nodejs下处理路径的小工具
var path = require('path');
//处理文件路径
var glob=require('glob');
//html文件打包压缩,动态引用
const HtmlWebpackPlugin=require('html-webpack-plugin');
//html文件解析器
const htmlLoader=require("html-loader");
//获取文件路径方法
var getEntry = function(){
//用于返回给entry的对象
var entry={};
glob.sync('./biz/**/*.*').forEach(function(name){
//例如./biz/index/js/index.js和./biz/login/login.js都会被找出来
var filePath=name;
//文件名,如index,login(省略后缀)
var fileName=name.substring(name.lastIndexOf("\/")+1,name.lastIndexOf('.'));//
//由于我们需要压缩多个同名文件,所以需要用数组来创建入口对象
if(entry[fileName]==undefined){
switch(fileName){
case"index":case"login":
//需要进行的特殊处理
entry[fileName]=new Array();
entry[fileName].push(filePath);
entry[fileName].push('./src/js/xxx.js');
break;
default:
entry[fileName]=new Array();
entry[fileName].push(filePath);
break;
}
}else{
entry[fileName].push(filePath);
}
})
return entry
};
module.exports = {
//等同于下面输入方法
entry: getEntry(),
/*
entry:{
'login':[
'./biz/login/controller/login.js',
'./biz/login/view/login.less',
'./src/framework/media.js'
],
}
*/
output: {
path: __dirname+'/dist/js/',
filename: '[name].[chunkhash].js',
publicPath:'/'
},
devServer: {
inline: false,
contentBase: "./dist",
},
module: {
rules: [
{
text:/\.(less|css|sass)$/,
use[
'style-loader','css-loader','less-loader' ,'sass-loader'
]
},{
text:/\.(jpe?g|gif|ttf|woff|eot|svg|png|PNG)$/,
loader:'url-loader?limit=10000000000&name=[path][name].[ext]'
}
{
test: /\.js$/,
//js文件解析时引用babel将源码转换为es5标准用于向下兼容浏览器
use:{
loader: 'babel-loader' ,
query: { presets: ['es2015']}
}
}
]
},
plugins: [
//用于压缩js文件
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false,
drop_console: true //去除注释
},
mangle:false //不开启代码混淆
//except: ['$super', '$', 'exports', 'require','$scope','$rootScope'] //排除关键字
}),
//用于压缩HTML文件
new HtmlWebpackPlugin({
title:"this is the result",
filename:'dist/htmlTemplate/index.html',
template:'biz/index.html',
inject:'body',
favicon:'',
minify:{
caseSensitive:false, //是否大小写敏感
collapseBooleanAttributes:true, //是否省略布尔型数值写法
collapseWhitespace:true, //删除空白行和换行
removeComments:false //是否去除注释
},
hash:true,
cache:true,
chunks['index'],
})
]
}
Webpack.config参数解释(专为太长不看星人准备)
entry:
webpack入口接收一个对象,内部可以接收{key:value},打包单个文件时value为字符串,value也可以接收一个数组,内部由多个文件路径构成,webpack会把这个数组里多个文件压到同名key对应文件下;
output:
webpack出口,可以设置输出路径,及输出文件名等;
devServer:
创建一个小型的node服务器,用于实时监测js文件变动时,实时同步刷新页面;(新手同学可忽略)
module:
text字段是一个正则表达式用于匹配对应后缀名文件的解析方式,若有使用一些外部插件则使用use加载插件
plugins
plugins用于初始化部分webpack引用插件,本例当中使用到了UglifyJs和HtmlWebpackPlugin
更多webpack帮助可以参见—— [webpack官方帮助]
学无止境——我还在路上