1、什么是 webpack?
- 概念:webpack(module bundler)是一个模块加载器兼打包工具,它能把各种资源,例如 JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。
- 目的:有依赖关系的各种文件打包成一系列的静态资源。
- 前端模块化:
- 打包:
- 和grunt/gulp的对比
- webpack为了正常运行,必须依赖node环境。而node环境为了可以正常运行很多代码,必须包含各种依赖的包。npm(node package manager)为了管理node上的各种包。
2、webpack安装
-
下载node,如果有node则查看node版本(node -v)
-
全局安装webpack
//全局安装webpack npm install webpack@版本号 -g //查看webpack版本 webpack -v
-
局部安装webpack
–save-dev是开发时依赖,项目打包后不需要继续使用的。
cd 对应目录 npm install webpack@版本号 --save-dev
-
为什么全局安装后,还需要局部安装呢?
- 在终端直接执行webpack命令,使用的全局安装的webpack
- 当在package.json中定义了scripts时,其中包含了webpack命令,那么使用的是局部webpack
3、webpack的基本使用
打包命令:
新版本:webpack 打包文件 -o 被打包文件
4、webpack.config.js和package.json配置
const path=require("path");
module.exports={
entry:"./src/main.js",
output:{
path:"./dist",
filename:"boudle.js",
},
}
npm init //初始化生成package.json
//package.json
//start
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
"author": "",
"license": "ISC"
}
//end
npm install//安装依赖,生成了node_modules、package-lock.json
//package.json中的scripts中起别名
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
}
//npm run build==webpack
/*安装局部webpack,结果是package.json中增加了开发时依赖
"devDependencies": {
"webpack": "^3.6.0"
}
*/
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.6.0"
}
}
//在终端里webpack都是全局的
noed_modules/.bin/webpack或者是 npm run build启动webpack打包
package.json中的scripts的脚本在执行的时候,会按照一定的顺序寻找命令的位置
- 首先,会寻找本地的node_modules/.bin路径中对应的命令。
- 如果没有找到,会去全局的环境变量中寻找。
5、webpack中使用css文件的配置
-
loader
-
webpack读取loader是从右向左读取,先是’css-loader’。然后是’style-loader’
6、webpack中使用lese文件的配置
下载less-loader
npm install --save-dev less-loader less
配置,在webpack.config.js中的module的rules
{
test:/\.less$/,
use:[
{
loader:"style-loader"
},
{
loader:"css-loader"
},
{
loader:"less-loader"
},
]
}
7、图片文件的处理
下载url-loader
npm install --save-dev url-loader
配置,在webpack.config.js中的module的rules
{
test:/\.(png|jpg|gif)$/,
use:[
{
loader:"url-loader",
options:{
//当加载的图片小于limit时,会将图片编译成base64形式
//当加载的图片大于limit时,需要使用file-loader模块进行加载
limit:8192
}
}
]
}
当加载的图片大于limit时,需要使用file-loader模块进行加载
下载file-loader
npm install file-loader --save-dev
我们可以在options中添加如下选项
-
配置options中的name,设置打包后的名字格式
8、ES6转成ES5的babel
下载babel对应的loader
npm install --save-dev babel-loader babel-core babel-preset-es2015
9、使用vue的配置过程
使用Vuejs,先安装vue
npm install vue --save
10、横幅plugin的使用
-
概念:plugin是插件,用于对某个现有的架构进行扩展
-
loader和plugin的区别
-
使用过程:
-
添加版权的plugin–BannerPlugin
const path=require("path"); const webpack=require("webpack"); module.exports={ entry:"./src/main.js", output:{ path:path.resolve(__dirname,"dist"), filename:"boudle.js", publicPath:'dist/' }, ... plugins:[ new webpack.BannerPlugin("最终版权归。。。所有") ] }
-
HtmlWebpackPlugin的使用
-
UglifyjsWebpackPlugin的使用
-
webpack-dev-server搭建本地服务器
-
webpack提供了可选的本地开发服务器,基于node.js搭建,内部使用express框架,可以实现浏览器自动刷新我们修改后的结果
-
安装
npm install webpack-dev-server@版本号 --save-dev
-
devServer:{ contentBase:'./dist', inline:true }
-
在package.json中配置另一个scripts:–open参数表示直接打开浏览器
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "dev":"webpack-dev-server --open" },
-
11、配置文件分离
新建文件夹build
–>新建文件base.config.js(里面是一些公共的配置)
const path=require("path");
const webpack=require("webpack");
const HtmlWebpackPlugin=require("html-webpack-plugin")
module.exports={
entry:"./src/main.js",
output:{
path:path.resolve(__dirname,"dist"),
filename:"boudle.js",
// publicPath:'dist/'
},
module:{
rules:[
{
test:/\.css$/,
//css-loader解析css文件后,使用import加载,并且返回css代码
//style-loader将模块的导出作为样式添加到DOM中
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:[
{
loader:"style-loader"
},
{
loader:"css-loader"
},
{
loader:"less-loader"
},
]
},
{
test:/\.(png|jpg|gif)$/,
use:[
{
loader:"url-loader",
options:{
//当加载的图片小于limit时,会将图片编译成base64形式
//当加载的图片大于limit时,需要使用file-loader模块进行加载
limit:8192,
name:"img/[name].[hash:8].[ext]"
}
}
]
},
{
test:/\.js$/,
exclude:/(node_modules|bower_compoments)/,
use:{
loader:'babel-loader',
options:{
presets:['es2015']
}
}
}
]
},
// alias--别名
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
plugins:[
new webpack.BannerPlugin("最终版权归。。。所有"),
new HtmlWebpackPlugin({
template:"index.html"
}),
],
}
const UglifyWebpackPlugin=require("uglifyjs-webpack-plugin")
const webpackMerge=require("webpack-merge")
const baseConfig = require("./base.config")
module.exports=webpackMerge.merge(baseConfig,{
plugins:[
new UglifyWebpackPlugin()
],
})
const webpackMerge=require("webpack-merge")
const baseConfig = require("./base.config")
module.exports=webpackMerge.merge(baseConfig,{
devServer:{
contentBase:'./dist',
inline:true
}
})
安装
npm install webpack-merge --save-dev
作用:webpack-merge把基础配置和生产配置或者开发配置合并在一起
最后:在package.json中的scripts配置
"scripts": {
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
}