珠峰架构公开课笔记之webpack4（二）配置篇

珠峰架构公开课笔记之webpack4（二）配置篇

个人经验之谈：学习webpack之前还是要先学好JS和ES6语法（尤其是箭头函数），然后有一定VUE基础，学起来webpack工作机制理解更快，反过来也能理解vue中一些配置原理，打好基础很重要。代码一定要去实践！由简入繁，从易到难。

0x01 打包多页应用

首先打包的入口和出口处配置多个：

webpack.config.js

entry: { // 入口，相对路径
  home: './src/index.js',
  other: './src/other.js'
},
output:{ // 出口
  // [name]: home other
  filename: '[name].js', // 打包后的文件名
  path: path.resolve(__dirname, 'dist')
},

然后打包时模板生成html插件中：

new HtmlWebpackPlugin({
  template:'./src/index.html',
  filename:'home.html',
  chunks:['home'], // 代码块,仅引入home
}),
new HtmlWebpackPlugin({
  template:'./src/index.html',
  filename:'other.html',
  chunks:['home','other'], // 代码块,可同时引入home和other的写法
  
}),

0x02 配置sourcemap

关于配置source-map:
源码映射,生成sourcemap文件，出错了会标识当前出错的列和行。

webpack.config.js

// 1）源码映射，生成sourcemap文件，出错了会标识当前出错的列和行，大而全，独立
// devtool: 'source-map', // 增加映射文件，可以帮我们调试源代码

// 2）不会产生单独的文件，但是可以显示行和列
// devtool: 'eval-source-map',

// 3）不会产生列 但是是一个单独的映射文件
// devtool: 'cheap-module-source-map', // 产生后可以保留进行调试

// 4）不会产生文件 集成在打包后的文件中 不会产生列
devtool: 'cheap-module-eval-source-map',

先在index.js把代码写错，等待sourcemap报错

在浏览器报错得到映射进行查看。

0x03 Watch的用法

npm run build下监控当前代码变化，实时打包

webpack.config.js

watch: true,
watchOptions:{ // 监控的选项
  poll:1000, // 每秒问我1000次
  aggreatementTimeout:500 // 防抖
  ignored:/node_modules/ // 不需要监控的文件
}

0x04 webpack小插件应用

1) cleanWebpackPlugin

yarn add cleanWebpackPlugin -D

webpack.config.js
let cleanWebpackPlugin = require(‘’)
plugins: [
new cleanWebpackPlugin({‘./dist’}) // 把dist先删掉再打包
]
2) copyWebpackPlugin

yarn add cleanWebpackPlugin -D

webpack.config.js
let copyWebpackPlugin = require(‘’)
plugins: [
new cleanWebpackPlugin([ // 拷贝
{from:’./doc’, to:’./(dist)’}
]) // 打包到dist
]
3) bannerPlugin–内置
webpack.config.js
let webpack = require(‘’)
plugins: [
new bannerPlugin(‘made 2020 by xx’) // 打包到文件开头声明
]

0x05 webpack跨域问题

express是node框架，起一个服务器

server.js

let express = require('express')

let app = express();
app.get('/api/user', (req,res)=>{
  res.json({name:'左左'})
})

app.listen(3000);

客户端发ajax请求

index.js

let xhr = new XMLHttpRequest();

// http:localhost:8080 webpack-dev-sever的服务---3000
// http proxy
xhr.open('GET', '/api/user', true);

xhr.onload = function(){
  console.log(xhr.response)
}

xhr.send();

客户端配置跨域

webpack.config.js

devServer:{
  // 1) 请求服务器
  proxy:{
    '/api':{ // 重写的方式把请求代理到express服务器上
      target:'http:localhost:3000' // 配置一个代理
      pathRewrite:{'/api', ''} // 重写路径
    }
  }
  // 2) 前端只想从mock模拟数据获取
  before(app){ //提供的方法/钩子
    app.get('/user', (req,res)=>{
    res.json({name:'左左-before'})
  }
}

3) 有服务端，不想用代理来处理，在服务端中启动webpack 端口用服务端端口

yarn add webpack-dev-middleware -D

server.js

let webpack = require('webpack')
let middle = require('webpack-dev-middleware') // 在服务端启动webpack

let config = require('./webpack.config.js')
let compiler = require(config)
app.use(middle(compiler))

0x06 resolve属性的配置

webpack.config.js

resolve:{ // 解析第三方包 common
  modules: [path.resolve('node_modules'],
  // 1）
  alias:{ // 别名  vue--vue.runtime
    bootstrap:'bootstrap/dist/css/bootstrap.css' // 举栗子：只引用其中的样式
  },
  // 2)
  mainFields:['style','main'], // 指定路径-先找style，找不到再找main
  // 3)
  mainFields:[], // 入口文件的名字index.js---根据应用场景
  extensions:['.js','.cs','.json','.vue'] // import时省略后缀在这里加上
}

0x07 定义环境变量

项目在开发时一套环境，上线时一套环境，如何选择开发还是上线的环境

webpack.config.js

plugins:[
  new webpack.DefinePlugin({
    DEV:"'dev'" // production
    // or
    DEV:JSON.strngify('')
    FLAG:'true' // 布尔类型不用加stringify，若是计算表达式加stringify为字符串，否则作为数字先计算
  })
]

index.js

if(DEV){
  url = ''
} else {
  url = ''
}

0x08 区分不同环境

分别写两个单独的文件，在两个文件中分别配上自己的环境(开发生产)，通过smart将两个配置文件合并，彻底解决生产环境和开发环境的不同。

yarn add webpack-merge -D

webpack.prod.js

let {smart} = require('webpack-merge')
let base = require('./webpack.base.js')
module.exports = smart(base, {
  mode:'production',
  optimization:{
    minimizer:[]
  },
  plugin:[]
})

webpack.dev.js

let {smart} = require('webpack-merge')
let base = require('./webpack.base.js')
module.exports = smart(base, {
  mode:'dev',
  devServer:{},
  devtool:'source-map'
})

Donate