webpack3基础知识
Posted tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack3基础知识相关的知识，希望对你有一定的参考价值。
## 本地化安装webpack ##
1. npm init //npm初始化生成package.json文件
2. npm install --save-dev webpack //安装webpack，dev表示安装到开发环境，save表示本地安装
3. 如果是老项目，有package.json文件，直接运行npm i 安装对应的依赖包
## webpack快速打包 ##
webpack src/entery.js dist/bundle.js
//将entery.js打包到bundle.js
如果有配置文件，直接运行webpack即可
## package.json ##
{
"name":"webpacktest",
"version":"1.0.0",
"description":"test webpack",
"main":"index.js",
"scripts":{ //本地npm启动命令：npm run xxxx
"server":"webpack-dev-server --open",
//open表示自动打开
"build":"set type=build&webpack", //node语法，传递参数
"dev":"set type=dev&webpack" //mac或linux：export type=dev&&webpack
},
"author":"tabb",
"license":"ISC",
"devDependencies":{ //开发依赖 --save-dev
"webpack":"^3.6.0",
"webpack-dev-server":"^2.8.2"
},
"dependencies":{ //生产依赖 --save ‘npm install --production‘(项目上线只安装生成包)
}
}
## webpack config ##
配置文件webpack.config.js
const glob=require("glob"); //引入全局控制插件
const path=require(‘path‘); //引入路径模块
const uglify=require(‘uglify-webpack-plugin‘); //引入js代码自动压缩模块
const htmlPlugin=require(‘html-webpack-plugin‘); //引入html打包插件
const extractTextPlugin=require(‘extract-text-webpack-plugin‘); //引入文件分离插件
const purifyCSSPlugin=require("purfiycss-webpack"); //引入css冗余删除插件
const copyWebpackPlugin=require("copy-webpack-plugin"); //引入静态资源处理
//根据配置传值，打包出不同的根目录，区分生产环境和开发环境
if(process.env.type="build"){ //node语法
var website={
publicPath:"http://tabb.com/" //设置根路径
}
}else{
var website={
publicPath:"http://192.168.0.104/" //设置根路径
}
}
var website={
publicPath:"http://192.168.0.104/" //设置根路径
}
module.exports={
entry:{ //入口文件路径
entry1:‘./src/entry1.js‘，
entry2:‘./src/entry2.js‘，
jquery:‘jquery‘,
vue:‘vue‘
},
output:{ //出口文件
path:path.resolve(__dirname,‘dist‘),
filename:‘bundle.js‘ //可写[name],js保持与入口文件名一致
publicPath:website.publicPath //设置项目引用的公共路径
},
module:{
rules:[ //css打包
{
test:/.css$/, //正则匹配对应需要处理的文件
use:[‘style-loader‘,‘css-loader‘] //添加打包需要使用的功能模块
//也可以写成如下形式
use:[{
loader:‘style-loader‘
},{
loader:‘css-loader‘
},
"postcss-loader" //css3自动加前缀
],
//extract抽离处理
use:extractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader"
})
}，
{
test:/.(png|jpg|gif)/, //处理图片
use:[
{
loader:‘url-loader‘,
boptions:{
limit:5000 //设置图片小于多大显示为base64编码
outputPath:"images/" //配置图片生成路径
}
}
]
}，
{ //处理html中image标签引用图片
test:/.(htm|html)$/i,
use:[‘html-withimg-loader‘]
}，
{ //处理less文件
test:/.(htm|html)$/i,
use:[
{
loader:"style-loader"
},{
loader:"css-loader"
},{
loader:"less-loader"
}
]
},
{ //babel配置
test:/.(jsx|js)$/,
use:{
loader:"babel-loader",
options:{
presets:["es2015","react"]
}
},
exclude:/node_modules/
}
]
},
plugins:[
new copyWebpackPlugin({ //处理静态资源
from:__dirname + "/src/public", //静态资源来源
to:"./public" //默认到dist目录下
}),
new webpack.optimize.CommonsChunkPlugin({ //配置第三方插件抽离打包
name:[‘jquery‘,‘vue‘], //对应入口配置entry中的key
filename:"assets/js/[name].[ext]", //配置输出路径，可将[ext]改为js，[name]自动匹配配置的名称
minChunks:2
})
new webpack.ProvidePlugin({
$:"jquery"
}),
new uglify(), //开发环境会报错，因为开发环境代码100%不压缩
new htmlPlugin({
minify:{ //配置压缩条件
removeAttributeQuotes:true //去除标签中的引号
},
hash:true, //给引入的js添加hash，保证加载新文件，防止缓存
template:‘./src/index.html‘
})，
new extractTextPlugin("/css/index.css"), //指定css分离打包路径
new purifyCSSPlugin({
paths:glob.sync(path.join(__dirname,‘src/*.html‘)) //全局搜索html文件中的dom，找到有效的css
}),
new webpack.BannerPlugin("tabb版权所有") //设置打包文件的title注释
],
devServer:{ //开发服务配置，需要安装webpack-dev-server
contentBase:path.resolve(__dirname,‘dist‘), //基本目录结构
host:‘192.168.0.104‘, //服务器host
compress:true, //服务器是否启用压缩
port:1717 //端口
},
watchOptions:{ //自动监测watch打包配置
poll:1000, //监测修改的时间
aggregeateTimeout:500, //表示500ms内重复按键ctrl+s不进行打包
ignored:/node_modules/, //忽略监视项
}
}
## babel配置文件，babelrc ##
{
presets:["env","react"] //env转换es6,es7等
}
## webpack中的工具安装 ##
1. webpack-dev-server //热更新工具
2. style-loader //样式处理
3. css-loader //css文件处理
4. uglify-webpack-plugin //js自动压缩插件
5. html-webpack-plugin //html打包插件
6. url-loader //处理路径
7. file-loader //处理加载文件
8. extract-text-webpack-plugin //抽离css等文件打包
9. html-withimg-loader //处理html中使用img标签引用图片
10. less less-loader //less编译
11. sass sass-loader //sass编译
12. postcss-loader autoprefixer //css3自动添加前缀依赖
13. purify-css purify-webpack //自动删除css冗余
14. babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-env //babel用于编译es6等语法，以及react中的jsx
15. webpack.ProvidePlugin //统一配置引入插件
16. webpack.optimize.CommonsChunkPlugin //配置第三方插件抽离打包
17. copy-webpack-plugin //静态资源打包
以上是关于webpack3基础知识的主要内容，如果未能解决你的问题，请参考以下文章