webpack第三天/多页面打包/ 配置source-map/watch的用法/小插件 plugins:/webpack 跨域/resolve/定义环境变量/区分不同的环境

webpack 多页面打包

module.exports = {
    //多入口
    entry:{
        home:'./src/index.js',
        other:'./src/other.js'
    },
    output:{
        //[name] 代表home 或other
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')

    },
    mode:'development',
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html', //模板地址
            filename:'index.html',        //生成的文件
            chunks:['home']      //代码块
        }),
        new HtmlWebpackPlugin({
            template:'./src/index.html', //模板地址
            filename:'other.html',        //生成的文件
            chunks:['other']
        })
    ]
}

配置source-map

// 1映射源码 会单独生成一个sourcemap文件， 出错了 会标识 当前报错的列和行
devtool:‘source-map’ //增加映射文件，可以帮我们调试源代码
//2
devtool:‘eval-source-map’ //不会产生单独的文件 但是显示行和列

watch的用法 实时打包

watch:true,
watchOptions:{   //监控的选项
    poll:1000, //每秒
    aggregateTimeout:500, //防抖
    ignored:/node_modules/   //不需要进行监控的文件
}

webpack 小插件 plugins:

1. cleanWebpackPlugin 每次打包清楚打包目录 yarn add clean-webpack-plugin -D

let { CleanWebpackPlugin }= require('clean-webpack-plugin');

new CleanWebpackPlugin()   //默认删除output.path

2. CopyWebpackPlugin 拷贝文件 yarn add copy-webpack-plugin -D

let CopyWebpackPlugin = require('copy-webpack-plugin');

new CopyWebpackPlugin([
  { from: 'source', to: 'dest' },
  { from: 'other', to: 'public' },
])

3. BannerPlugin 版权声明

let WebPack = require('webpack');

new WebPack.BannerPlugin('shen 2019 10 17')

webpack 跨域

第一种 有服务器

devServer:{
    proxy:{
        // '/api':"http://localhost:3000" // 配置了一个代理
        '/api':{
            target:'http://localhost:3000',
            pathRewrite:{'/api':''}   //重写路径
        }
    }
} 

第二中 没有服务器 前端单纯模拟数据

devServer:{
    before(app){
        app.get('/user',(req,res)=>{
            res.json({name:'jie'})
        })
    }
}

index.js

let xhr = new XMLHttpRequest();
//默认http://localhost:8080   //webpack-dev-server的服务 -》3000
xhr.open('GET','/user',true)

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

xhr.send()

第三种 有服务端 不想用代理来处理 在服务端启动webpack 端口用服务端端口

在server中使用webpack-dev-middleware

yarn add webpack-dev-middleware -D

server.js

let express = require('express');
let app = express();

let webpack = require('webpack');
let webpackDevMiddleware = require('webpack-dev-middleware')
let config = require('./webpack.config.js');
let compiler = webpack(config);
app.use(webpackDevMiddleware(compiler));

app.get('/user',(req,res)=>{
    res.json({name:'shen'})
})
app.listen(3000);

resolve

定义环境变量

 new webpack.DefinePlugin({
     DEV:JSON.stringify('dev')
 })

区分不同的环境

 yarn add webpack-merge -D

https://webpack.js.org/guides/production/#setup