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()
]
