webpack 基础篇
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。
你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期 Github 上各大主流的（React相关）项目来说，它们仓库上所展示的示例已经是基于 webpack 来开发的，比如 React-Boostrap 和 Redux。
入门篇
新建项目目录 cd到目录下 npm init初始化node项目
项目目录
├──app
├──build 生成打包文件目录
├──lib 导出组件目录
│ └───app.js 打包的JS文件
├───node_modules 项目依赖
├──index.html 页面入口
├──package.json 项目配置
├──webpack.config.js webpacke配置文件
npm安装 webpack到全局
$ npm install webpack -g
通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。
$ npm install webpack --save
在项目html的简单模板配置不能满足实际的开发需求，安装html-webpack-plugin.
npm install html-webpack-plugin --save
配置webpack.config.js
varpath =require('path');
varhtmlWebpackPlugin =require('html-webpack-plugin');
module.exports={
entry:'./components/app.js',//定义文件的入口
output:{//导出配置
path:'./build/',//导出文件目录
filename:'build.js',//导出文件名
// publicPath:"www.baidu.com"//静态路径配置（可选）
},
plugins:[
newhtmlWebpackPlugin({
template:'index.html'指定了打包的模板文件
})
],
};
基础版的webpack配置已经完成
命令行运行webpacke
build目录下已经生成的打包好的2个文件
├──build
│ └──build.js
│ └──index.html
项目配置参数
webpack命令行参数
--watch 动态监听有文件改变时候重新生成页面
--progress 可以看到打包过程
--display-modules 展示打包模块
--display-reasons 打包原因
--colors 命令显示彩色
我们可以在package.json中加入start命令
....
script{
"start":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
}
....
命令行运行 npm run start 打包时候就可以看到罗列出的参数
配置参数介绍
entry:入口配置
方式1 单一入口配置简单
entry:'../app.js'
方式2 多个JS并行打包到同一个html中
entry:['../app.js','../main.js'] 多个JS打包
方式3:多配置方案
entry:{
app:app.js
main:main.js
test:test.js
}
hmlt模板配置
filename 生成html模板名
minify 模板过滤器生成模板是删除掉不必须的元素
inject 配置js写在那个部分
chunks[包含] 生成模板时候指定包含的 entry文件
excludeChunks[排除] 排除选中的文件 全部导入
newhtmlWebpackPlugin({
filename:'',// 生成html模板名
template:'',// 模板入口
inject:'head',// 设置js是写在head里还是body里
minify:{//过滤器
removeComments:true,//删除所有空格
collapseWhitespace:true//删除所有注释
}
/* htmlplugin支持ejs可以配置一些自定义参数在 html用ejs表达式取值*/
title:'this is my title'//html中使用<%= title %>
})
config中 loader配置
module:{
loaders:[
{
test:'/\.js$/',//装换所有JS文件
loader:'babel',//babel 转换器
query:{
presets:['lastest']//lastest 打包所有新特显es2015 2016 2017
}
}
]
}
webpack.config.js配置
varhtmlWebpackPlugin =require('html-webpack-plugin');
varpath =require('path');
module.exports={
entry:{
main:'/components/app.js',
layer:'components/layer.js',
tools:'components/tools.js'
},
output:{
path:'./build/',
filename:'js/[name].js',
},
plugins:[
newhtmlWebpackPlugin({
filename:'index.html',
template:'index.html',
minify:{//过滤器
removeComments:true//删除所有空格
}
chunks[main,layer]//打包包含这2个JS
title:"this is build",
inject:'body'
}),
newhtmlWebpackPlugin({
filename:'detail.html',
template:'index.html',
excludeChunks[layer]//排除layer打包其他entry里的js
title:"this is build",
inject:'body'
})
]
};
npm install babel-preset-latest 安装es6加载器
运行 npm run start 打包
打包一个登录组件
项目依赖包
安装ES6转码工具
npm install babel-core babel-loader --save
项目中可能用less或 sass 安装对应的loader
npm install less-loader --save
css中可能需要添加浏览器前缀兼用不同版本的浏览器，安装postcss-loader在打包过程中会帮你添加css的各种浏览器前缀。
npm install postcss-loader --save
npm install autoprefixer --save
在根目录下新建 postcss.config.js:
```
module.exports = {
plugins: [
require('autoprefixer')([
broswers:['last 5 versions'] //表示对最近5个版本进行处理
])
]
}
```
安装 ejs loader 处理html中的js模板变量
安装file-loader 解决css中编译引用图片报错问题
npminstallejs-loader--save
npminstallfile-loader--save
如果我们在项目中使用相对路径引用了图片 而不是在css中引用 会出现资源找不到
我们需要换成绝对路径或者使用
这样的写法来解析资源的相对路径
有时候我们在项目过程中需要对太大的图片进行压缩
file-loader 配合url-loader可以压缩图片
npm install url-loader image-webpack-loader --save
{
test:/.(png|jpg|gif|svg)$/,
loader:'file-loader',
query:{
limt:2000, //压缩打包图片 200K
name:'assets/[name]-[hash].[ext]'
}
}
配置文件
package.json
.....略
"scripts": {
"webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
},
.....略
},
"dependencies": {
"autoprefixer":"^6.7.7",自动添加浏览器前缀-webkit- -ms- 等
"babel-core":"^6.24.0",ES6代码转为ES5代码
"babel-loader":"^6.4.0",
"babel-preset-latest":"^6.24.0",
"css-loader":"^0.27.3",css解析器
"ejs-loader":"^0.3.0",ejs解析器
"file-loader":"^0.10.1",图片路径解析器
"html-loader":"^0.4.5",html解析器
"html-webpack-plugin":"^2.28.0",
"minify": {},过滤
"postcss-loader":"^1.3.3",
"style-loader":"^0.13.2"
}
}
项目目录
├──app
├──build 生成打包文件目录
├──public 一些公用的打包资源
│ └───js
│ └───image
│ └───css
├──components 导出组件目录
│ └───login 需要打包的组件资源
│ └────login.js
│ └────login.css
│ └───app.js 入口文件
├──node_modules 项目依赖
├──index.html 页面入口
├──package.json 项目配置
├──webpack.config.js webpacke配置文件
├──postcss.config.js 前缀解析loader配置
app.js
import'../public/css/rest.css'
importRegfrom'./reg/reg.js'
constApp =function(){
console.log("components stand ready");
varappEL=document.getElementById('app');
varreg =newReg();
appEL.innerHTML = reg.tpl({
... ejs引擎参数传入 略 ...
})
};
newApp();
reg.js
import'./reg.css'
importtpl from'./reg.ejs'
exportdefaultfunctionreg(){
return{
.... 略 ...
name:"reg-components",
tpl:tpl
}
}
npm run webpack 组件已经打包好
网友评论