bilibili-webapck-02

P12 多页面应用

	entry: {
    	home: './src/index.js',
        other: './src/other.js'
    },
    output: {
    	filename: '[name].[hash:8].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [{
    	new HtmlWebpackPlugin({
        	template: './index.html',
            filename: 'home.html',
            chunks: ['home']
        }),
        new HtmlWebpackPlugin({
        	template: './index.html',
            filename: 'other.html',
            chunks: ['other']
        })
    }]

P13 souce-map

devtool: 增加映射文件
- source-map: 文件 + 行列
- eval-source-map: 无文件 + 行列
- cheap-module-source-map: 文件 + 行
- cheap-module-eval-source-map: 无文件 + 行
`cheap-module` 只有行 `eval` 不产生文件

P14 watch配置

watch: true,
watchOptions: {
	poll: 1000, // 轮询频率
    aggregateTimeout: 500, // 防抖
    ignored: /node_module/ //
}

P15 webpack小插件

• clean-webpack-plugin: 清楚编译文件
• copy-webpack-plugin: 拷贝文件
• webpack.BannerPlugin: 插入banner

	plugins: [{
    	new HtmlWebpackPlugin(),
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin([
        	{ form: 'doc', to: './' }
        ]),
        new webpack.BannerPlugin('made 2020 by ...')
    }]

P16 webpack跨域

• 重写请求的方式，前端把请求代理到后端服务器

	devServer: {
    	proxy: {
        	'/api': {
            		target: 'http://localhost:3000',
                    pathRewrite: { // 路径重写
                    	'/api': ''
                    }
               }
            
        }
    }

• 前端模拟数据

	devServer: {
    	before(app) { // app为express实例
        	app.get('/api', (req, res) => {
            	res.json({name: ''})
            })
        }
    }

• 有服务器，不用代理来处理，服务端启用webpack,前后端同一个端口

const app = require('express')()
const webpack = require('webpack')
const config = require('./webpack.config.js')
const webpackDevMiddleware = require('webpack-dev-middleware')
const compiler = webpack(config)
app.use(webpackDevMiddleware(compiler))
app.get('/api', (req, res) => {})

P17 resolve属性

resolve: { // 解析 第三方包
	modules: [path.resolve('node_modules')], // 查找路径
    alias: {	// 别名
    	@: './src'
    },
    mainFields: ['style', 'main'], // 定义查找顺序
    extensions: ['.js', '.css'] // 定义扩展名顺序
}

P18 定义环境变量

plugins: [{
	new webpack.DefinePlugin({ // value为eval('value')的结果
    	DEV: JSON.string('dev'), // DEV = 'dev'
        Flag: 'true', // Flag = true
        Expression: '1+1' // Expression = 2
    })
}]

P19 区分不同环境

1. 创建不同环境的配置文件
2. webpack-merge: 合并webpack配置

P20 noParse 不去解析模块依赖库

import jquery from 'jQuery'
module.noParse: /jQuery/

P21 ignorePlugin 忽略打包语言包

new webpack.IgnorePlugin(/\.\/locale/, /moment/) // 忽略moment包中引用的./locale
由于忽略了自动包引入，所以需要手动引入需要的包