个人维护的 webpack@latest 多页脚手架2.X已经发布,喜欢请给星,详见: https://github.com/pomelott/webpack-multi-page-cli
首先介绍传统模块化开发的主流方案:
1.基与CMD的sea.js,玉伯提出的解决方案,据说原来京东团队在使用。用时才定义,就近加载。
2.基于AMD的require.js,之前在用。提前声明与定义。国外团队维护。
3.基于commonJS的webpack,当下最流行的,也是大势所趋。基于node环境,功能强大,可扩展性极强。得益于NPM的良好生态、开源社区,扩展项不断增加。国外的同行维护得很给力。
连续研究了几天webpack,掉进很多坑也收获很多,学好之后用起来简直不能再爽,比之前用的require爽的不止一点点。
若未遇到本文提到的“坑”,可直接跳过,不作考虑!
下面正式开始webpack的征程!
1.webpack环境构建
***使用webpack首先要安装node.js环境:
官方下载直接安装即可。
坑一:WIN8下可视化安装node有时会报2502、2503的错误,在此需要提升至管理员权限,并以管理员权限运行cmd,使用msiexec /package 文件名 进行安装。
***环境安装完之后可以使用:node -v 和npm -v 测试node环境是否安装成功。若安装成功则继续下载webpack:npm install webpack -g 在此全局安装即可,若需在项目目录下安装,则使用命令:npm install webpack --save-dev.
坑二:安装webpack对node版本要求,卸载之前的node(可在命令行使用where node查看node的本地目录以保证node被完全卸载),安装最新版本即可。
2.项目构建、创建文件
***webpack安装成功后,开始构建项目,首先创建目录:
项目目录结构非常重要(后面还有坑在等着你),src为开发目录,build为打包目录,以后还有详解。
命令行中进入项目目录:npm init 创建pack.json。
在src目录下创建开发环境目录,如下图所示:
images-------------------图片模块文件夹(后面会说明图片模块的打包)
index.js-------------------打包的入口文件
common.js-----------------为普通的js模块文件
style.css------------------样式模块文件
index.html文件代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1">
</div>
<script type="text/javascript" src="./bundle.js"></script>></script>
</body>
</html>
***bundle.js为打包后的文件,里面包括所有模块(js/css/图片/字体等)的配置及打包文件。
3.完成js的打包
common.js文件代码如下:
module.exports.doCommon=function(){
console.log("common is ok !")
}
index.js文件代码如下:
var commonFn=require("./common.js");
commonFn.doCommon();
console.log("index is ok !");
在命令行中进入src目录:webpack index.js bundle.js
在浏览器中查看index.html,打开控制台,效果如下则完成对js的打包:
common is ok !
index is ok !
4.打包css模块
在此需要安装style-loader与css-loader
npm install style-loader css-loader --save-dev
在此打包css有两种方式:
方法(1)在入口文件index.js中直接require样式文件,此方法需要指定加载器:
创建一个style.css文件,随意加些样式,然后在入口文件中引入style.css。index.js文件:
坑三:在此require("style!css!./style.css")也可以,但有时会报错,补全最好;
require("style-loader!css-loader!./style.css");
命令行中运行:
webpack index.js bundle.js
打开index.html,样式已经应用上.
方法(2)在根目录添加webpack.config.js配置文件后直接引入css文件
webpack.config.js文件代码如下:
var path=require("path")
module.exports={
entry:{
//入口文件路径,要求为相对路径
index:["./src/index.js"]
},
output:{
filename:"bundle.js",
//paht要求为绝对路径,需要引入paht模块调用resolve方法
path:path.resolve(__dirname,"src/")
},
module:{
loaders:[
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
}
}
index.js文件代码如下
require("./style.css");
var common=require("./common.js");
common.commonFn();
console.log("index is ok")
修改style.css样式后,重新使用webpack命令,打开index.html,新的样式已经应用上.
5.打包html
接下来使用html-webpack-plugin将开发文件打包至build文件夹下:
首先下载插件:
npm install html-webpack-plugin --save-dev
完了之后重新配置文件:
var path=require("path");
//插件需要引入
var htmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
entry:{
//入口文件路径,要求为相对路径
index:["./src/index.js"]
},
output:{
filename:"bundle.js",
//paht要求为绝对路径,需要引入paht模块调用resolve方法
//现在要把输出路径改为构建路径
path:path.resolve(__dirname,"./build/")
},
module:{
loaders:[
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
},
plugins:[new htmlWebpackPlugin({
title:"firstwebpack",
template:"./src/index.html",
filename:"index.html"
})]
}
在命令行中输入webpack直接打包至build文件夹下,打开index.html后查看效果,样式已经应用上:
坑四:在此输入webpack命令后可能会报错:“Cannot find module 'webpack/lib/node/NodeTemplatePlugin”,原因是node的安装目录冲突导致系统node的NODE_PATH环境变量配置错误。
解决方案:在命令行中输入:
npm config get piefix
此命令会显示当前系统应用的node路径,按照此路径配置环境变量即可。
6.打包图片文件
坑五:在css中引入图片的大小大于8k时,若没有安装file-loader会报错,原因是大于8k的图片会被webpack当做文件处理,而小于8k的图片会被转为base64编码引入行间以减少http请求;若未下载html-withimg-loader则在html中引入的img标签不会被打包。
需要下载三个加载器:
npm install url-loader file-loader html-withimg-loader --save-dev
配置文件中增加loader的配置选项:
//用于css中背景图片的加载器
{
test: /\.(png|jpg)$/,
//limit:图片大小小于8K,会以base64编码图片以减少http请求
//name:输出子目录构建
loader: 'url-loader?limit=8192&name=./images/[name].[ext]'
}, //用于html中img标签的图片加载器
{
test: /\.html$/,
loader: 'html-withimg-loader'
}
最后在html中增加img标签,在css中利用background引入标签,重新运行webpack后即可看到图片被加载出来了。
7.打包jquery
使用jquery需要下载jquery包和expose-loader装载器
npm install jquery expose-loader --save-dev
然后进行装载器配置:
***需配置在所有loader之前,配置文件如下:
var path=require("path");
//插件需要引入
var htmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
entry:{
//入口文件路径,要求为相对路径
index:["./src/index.js"]
},
output:{
filename:"bundle.js",
//paht要求为绝对路径,需要引入paht模块调用resolve方法
//现在要把输出路径改为构建路径
path:path.resolve(__dirname,"./build/")
},
module:{
loaders:[
//配置在所有装载器最前面
{
test: require.resolve("jquery"),
loader: "expose-loader?$"
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg)$/,
//limit:图片大小小于8K,会以base64编码图片以减少http请求
//name:输出子目录构建
loader: 'url-loader?limit=8192&name=./images/[name].[ext]'
},
{
test: /\.html$/,
loader: 'html-withimg-loader'
}
]
},
plugins:[new htmlWebpackPlugin({
title:"firstwebpack",
template:"./src/index.html",
filename:"index.html"
})]
}
在index.js中引入jquery
//index.js require("./style.css");
//引入jquery并指定装载器为expose-loader
require("expose-loader?$!jquery");
var commonFn=require("./common.js");
commonFn.doCommon();
console.log("index is ok !") $("#div1").css({"border":"10px solid #f00"})
重新webpack后打开index.html,未报错,样式已经应用上。
至此,基础的webpack打包已经完成,后续的进阶打包会持续更新.....
完全原创,喜欢请点击右下角推荐,未经允许禁止转载。