webpack学习(二)

一、多页应用的配置

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