webpack笔记汇总

1-1安装:
npm init -y
npm install webpack webpack-cli --save
1-2 通过命令行来切换dev || product 环境,解决通过注释来切换环境
npm install --save-dev cross-env
可在package.json中配置:
"scripts": {
"dev": "cross-env NODE_ENV=development webpack",
"build": "cross-env NODE_ENV=production webpack"
},
webpack.config.js中配置:(
mode:process.env.NODE_ENV,
)
npm run dev后,全局变量process.env.NODE_ENV为development
npm run build后,全局变量process.env.NODE_ENV为production
1-3 webpack-dev-server(路径重定向、接口代理、热更新、浏览器显示编译错误)
npm install webpack-dev-server
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --port 3000 --content-base ./dist/",
"build": "cross-env NODE_ENV=production webpack"
},
或在webpack.config.js 中增加devServer字段,如:
devServer:{
port:3000,
hot:true,
hotOnly:true,
inline:true,
overlay:true (错误遮罩),
historyApiFallback:true,(路由找不到,页面保持不动),
historyApiFallback:{
rewrites:[
{
from:/^\/([ -~]+)/,
to:function(context){
return './'+context.match[1] + '.html'
}
}
]
},(配置重定向),
proxy:{ //代理转发,匹配/api就转发,转发时将/api替换成/,headers转发携带请求头
'/api':{
target:'https://www.baidu.com',
changeOrigin:true,
pathRewrite:{
'^/api':'/'
},
headers:{

}
},
'/baidu':{
...
}
}
}
注:webpack-dev-server --hot --inline --port 3000 开启3000端口热更新
--content-base ./dist/ 打包后自动监听dist目录下的index.html文件
webpack.config.js,通过--config命令可以修改为另一个配置文件。例如:webpack-dev-server --hot --inline --config webpack.es6.config.js
1-4 source-map (追踪定位到原始文件错误,否则直接报错文件都在bundle.js,不利于排查)
开发模式:devtool:"cheap-module-source-map"
生产模式:devtool:"source-map"
2-1解析es6语法
npm install babel-loader @babel/core --save-dev
npm install @babel/preset-env --save-dev
rules:[
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:[
['@babel/preset-env',{targets:{browsers:['>1%']}}]
]
}
}
}
]
可新建.badelrc文件,放入
presets:[
[
'@babel/preset-env',{
targets:{
browsers:['>1%']
}
}
]
]
2-2.es6方法编译
npm install babel-polyfill --save-dev
npm install @babel/plugin-transform-runtime @babel/runtime --save
babel-polyfill(生成全局对象方法)使用方式,在js文件头部引入import 'babel-polyfill' || entry:['babel-polyfill','app.js']
babel-transform-runtime (生成局部对象方法)使用:.babelrc文件新增:
"plugins":[
[
'@babel/transform-runtime'
]
]
3.Typescript
npm install typescript ts-loader --save-dev
rules:[
{
test:/\.tsx?$/,
use:'ts-loader'
}
]
创建tsconfig.json文件:
{
"compilerOptions":{
"module":"commonjs",
"target":"es5"
},
"exclude":["./node_modules"]
}
4-1.css编译处理
css-loader:可以是使用js import引入
style-loader:将css以style标签插入页面
npm install style-loader css-loader --save
rules:[
{
test:'/\.css$/',
use:[
{
loader:'style-loader',
options:{
insertAt:'top',顶部
insertInto:'#id',插入到id标签下
singleton:true 合并到一个style标签
}
},
{
loader:'css-loader',
options:{
module:true
}
}
]
}
]
less编译loader:
npm install less less-loader --save
rules:[
{
test:'/\.less$/',
use:[
{
loader:'style-loader'
},
{
loader:'css-loader'
},
{
loader:'less-loader'
}
]
}
]
sass编译loader:
npm install sass-loader node-sass --save
4-2.css提取为单独的文件
npm install extract-text-webpack-plugin@next webpack --save(extract-text-webpack-plugin@next基于局部webapck)
webpack.confing.js文件:(
const extractTextCss = require("extract-text-webpack-plugin");
module:{
rules:[
{
test:/\.less$/,
use:extractTextCss.extract({
fallback:{
loader:'style-loader',
options:{
...
}
},
use:[
{
loader:'css-loader',
},
{
loader:'less-loader'
}
]
})
}
]
},
plugins:[
new extractTextCss({
filename:'[name].min.css'
})
]
)
4-3.css兼容性
npm install postcss postcss-loader autoprefixer postcss-cssnext --save
use:[
{
loader:'css-loader',
},
{
loader:'postcss-loader',
options:{
ident:'postcss',
plugins:[
require('autoprefixer')({
"overrideBrowserslist":[
">1%","last 2 versions"
]
}),
require('postcss-cssnext')()
]
}
},
{
loader:'less-loader'
}
]
5生成HTML
npm install html-webpack-plugin --save -dev
filename:打包生成后的html文件的名字
template:指定一个html文件为模板
minify:压缩html
inject:是否把js、css文件插入到html,插入到哪
chunks:多入口时,指定引入chunks
webpack.config.js:(
const htmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
new htmlWebpackPlugin({
filename:'index.html',
template:'./index.html',
minify:{
collapseWhitespace:true
},
inject:true,
chunks:['app'] 只引入app.js入口文件
})
]
)
6.webpack环境配置
开发模式:额外用到一些调试功能,比如webpack-dev-server,为了加快调试,不用压缩,tree-shaking
生产模式:减少体积,用tree-shaking,不用webpack-dev-server、eslint功能
功能:
production:去除无用代码、图片压缩、转码base64,雪碧图、提取公用代码
development:webpack-dev-server、source-map、代码风格检查
webpack3 : (
环境使用:(
webpack --env envname
修改webpack.config.js模块导出结构:
module.exports=env=>{ //env为环境名
const config = {
entry,
output,
...
}
return config;
}
)
环境编写:
创建webpack.dev.js放入dev模式配置选项
创建webpack.product.js 放入product模式配置选项
在webpack.config.js 中判断环境,然后选择dev | product合并
合并 : webpack-merage
const merage = require("webpack-merage");
const product = require("./webpack.product.js");
const dev = require("./webpack.dev.js");
module.exports=env=>{ //env为环境名
const config = {
entry,
output,
...
}
return merage(config,env === "production"? product:dev);
}
)
webpack4:(
打包:webpack --mode evname
注:process.env.NODE_ENV 未赋值
)
7.原理解析:
依赖node环境,node读取文件,处理后写出文件
读取配置文件=》注册内部插件与配置文件=》loader编译=》组织模块=》生成最终文件
loader原理:(
一个方法接收字符串,处理返回字符串

)
8.代码分割
提取公共依赖:(

)
减少文件体积,拆分应用:(
optimization:{
splitChunks:{
name:true
chunks:"initial" ,// all 所有同步代码提取 initial 同步和异步都提取 async异步代码提取
minSize:0,
automaticNameDelimiter:".",
cacheGroups:{
vender:{
test:/[\\/]node_modules[\\/]/,
name:"vender",
priority:-10
}
},
},
runtimeChunk:{
name:"runtime"
}
},
plugins:[
new htmlWebpackPlugin(
{
filename:'index.html',
template:"index.html",
chunks:['app','runtime','common','vender']
}
)
]
)
异步文件提取懒加载:(
import(/*webpackChunkName:'rename'*/"name.js").then(res=>{
});
require.ensure(['jquery'],function(){

})
)
打包方式:(
多页面应用:业务代码+公共依赖+第三方包+webpack运行代码
单页面应用:业务代码+异步模块+第三方包+webpack运行代码
)

9.清除上次打包文件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
plugins:[
new CleanWebpackPlugin()
]

posted on 2020-01-03 16:39  changYao  阅读(327)  评论(0编辑  收藏  举报