webpack4-2

expose-loader 暴露全局的loader， 内联loader

pre loader
post loader
normal loader
内联loader
import $ from ‘exposr-loader?$!jquery’

new webpack.ProvidePlugin({
            $: 'jquery' // 每个模块都可以使用 $
        })

url-loader 小于limit 的可以使用base64， 大于limit 的直接使用图片， 可以设置outputPath 输出到文件夹中 file-loader import 或者 require 导入。 直接用地址是 字符串不是图片，

多入口

entry: {
  home: './src/home.js',
    index: './src/index.js'
},
 output: {
    filename: '[name].js', // name 对应 extry 的key
    path: path.resolve(__dirname, 'dist'),
 },
 plugins:[
        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: 'home.html',
            chunks: ['home']  // 只引入 home.js
        }),
        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html',
            chunks: ['index', 'home']
        }),
    ]

devtool: ‘source-map’, // 增加映射文件， 调试源代码 大而全 单独文件

devtool: eval-source-map // 不会产生单独文件，但是会显示行和列
devtool: cheap-module-source-map // 不显示行和列 ，生成单独文件， 对应不上
cheap -module-eval-source-map // 不显示列 不生成文件，集成在源码中

watch: true 实时打包

watchOptions: {

},

_
常用插件 cleanWebpackPlugin copyWebpackPlugin webpack.bannerPlugin, 版权声明。打包出来的文件前面加上 文字内容

跨域

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

resolve 解析第三方包

resolve: { // 解析 第三方包
        modules: [path.resolve('node_modules')],
        extensions: ['.js','.css'],
        mainFields: ['style', 'main'],
        alias: {
            bootstrap: 'bootstrap/dist/css/bootstrap.css'
        }
    },

new webpack.DefinePlugin({
  DEV: "'dev'",
  'process.env: JSON.stringify('production')
}),

• webpack-merge 区分不同环境 引用不同文件 ```javascript // webpack.prod.js npm run build — —config webpack.prod.js

const { smart } = require(‘webpack-merge’) let base = require(‘./webpack.base.js’)

module.exports = smart(base, { mode: ‘production’ }) ```