一、多页应用的配置
const path = require("path");
const HtmlWpackPlugin = require('html-webpack-plugin')
const htmlPluginHome = new HtmlWpackPlugin({
template: './src/index.html',
//多个 html
filename: 'home.html',
//chunks代码块 放置引入的东西，代表当前要打包的是哪个文件
chunks: ['home']
})
const htmlPluginOther = new HtmlWpackPlugin({
template: './src/index.html',
//多个 html
filename: 'other.html',
//chunks代码块 放置引入的东西，代表当前要打包的是哪个文件
chunks: ['other']
})
entry: {
//首页
home: './src/index.js',
//other页相关
other: './src/other.js',
},
//两个出口
output:{
// name代表 home或者other .[hash] 给文件加一个hash串
// filename: '[name].[hash].js',
filename: '[name].js',
path: path.resolve(__dirname,'dist')
},
plugins: [
// 打包多页面 需要new多次
htmlPluginHome,
htmlPluginOther,
]
二、sourcemap源码映射
当我们打包后的文件运行出错的时候很难找到错误，这个时候就可以用sourcemap来解决这个问题了
// 1.源码映射 单独生成一个 source-map文件 出错会标识出错的列和行 大和全
devtool:'source-map',
// 2.不会单独生成一个文件 但会显示行和列
devtool: 'eval-source-map',
// 3.不会产生单独列 但会生成一个映射文件
devtool: 'cheap-module-source-map', //保留 后来调试用
// 4.不会单独生成文件 集成在打包文件中 也不产生列
devtool: 'cheap-module-eval-source-map',
这样就可以很方便的调试我们的代码
三、watch监控实时打包
我们希望修改完的代码能自动打包，而不是我们执行那npm run build，这个时候watch就实时打包。
//监控代码的变化 实时打包 类似node里边那个实时监控的
watch: true,
//监控的选项
watchOptions: {
poll: 1000, //每秒问1000次
aggregateTimeout: 500 ,//防抖 （类似于函数防抖）
ignored: /node_modules/ //忽略哪个文件 不需要监控
},
四、实用小插件
// bannerPlugin 版权声明
const bannerPlugin = new webpack.BannerPlugin('make by hanke ,i will become success!')
// 这个是错误写法 正确写法 应该是解构赋值那样写 说明这个插件包含许多东西
// const CleanWebpackPlugin = require('clean-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin') //每次打包前都先删除之前的文件再进行打包
//拷贝文件
const copyPlugin = new copyWpackPlugin(
//接受一个数组 可以多个文件
[{from:'./doc',to:'./'}] //将./doc文件拷贝到打包后文件的根目录下
)
五、跨域问题
//跨域问题的设置
devServer:{
//这是 服务器为 /api/user
proxy : {
'/api':'http://localhost:3500'
},
// /user的用法
proxy: {
// 重写的方式 把请求代理到express服务器上
'/api': {
target: 'http://localhost:3500',
pathRewrite: {
'/api':'/'
}
}
},
//前端只想单纯模拟方法
before(app){ //提供的方法 相当于钩子
//写这些代码就不存在跨域问题
app.get('/user',(req,res)=>{
res.json({
name: 'myname-before'
})
})
}
//有服务端，但是不用代理来处理 在服务器端开启webpack 端口用服务端端口
}
https://blog.csdn.net/qq_39083004/article/details/80860675
六、resolve配置
//解析第三方模块 commen
resolve: {
//指定解析的模块 第三方包
modules: [path.resolve('node_modules')],
//或者用 mainFields 入口的字段 先找style 再找main
// mainFiles: [],//入口文件的名字 默认找index.js
mainFields: ['style','main'],
//扩展名 可以省略 需配置 extensions 依次解析
extensions: ['.js','.css','.json']
//别名 如 vue的vue-runtime和那个@
// alias: {
// bootstrap: 'bootstrap/dist/css/bootstrap.css'
// }
},
七、配置环境变量
webpack.DefinePlugin是webpack自带得一个插件，不需要下载安装
// 判断开发环境还是生产环境的插件 DefinePlugin
const definePlugin = new webpack.DefinePlugin({
DEV: JSON.stringify('production'), //生产环境 上线了
DEV: 'dev' //表示是开发环境
})
plugins: [
// 内置插件 判断开发环境
definePlugin
],
index.js
//根据环境来判断用哪个url
let url
if(DEV === 'dev'){ //表示是开发环境
url = 'http://localhost:8000'
}else { //线上环境
url = 'http://www.project.com'
}
但是这样太乱了，我们可以把生产环境和开发环境分开来写
新建两个文件：webpack.dev.js 和 webpack.prod.js 分别表示开发环境配置和生出环境配置
//开发环境得配置
//安装 webpack-merge 将基础配置和开发配置合并
let {samrt} = require('webpack-merge')
let base = require('./webpack.base.js') //我们自己写的基础配置
const definePlugin = new webpack.DefinePlugin({
DEV: 'dev' //表示是开发环境
})
module.exports = {
mode: 'development',
plugins: [ //一些插件
definePlugin
],
optimization: { //优化项
minimizer:[
]
}
}
//打包命令： npm run build --config webpack.dev.js
//生产环境得配置
//安装 webpack-merge 将基础配置和生产配置合并
let {samrt} = require('webpack-merge')
let base = require('./webpack.base.js') //我们自己写的基础配置
const definePlugin = new webpack.DefinePlugin({
DEV: JSON.stringify('production'), //生产环境 上线了
})
module.exports = {
mode: 'production',
plugins: [ //一些插件
],
optimization: {
minimizer:[
]
}
}
//打包命令： npm run build --config webpack.prod.js