拆分配置和merge

webpack.common.js
wepack.dev.js
webpack.prod.js

我们在dev/prod文件中

  1. /*****省略部分不重要****/
  2. const webpackCommonConf = require('./webpack.common.js')
  3. const { smart } = require('webpack-merge')
  5. module.exports = smart(webpackCommonConf,{
  6.     mode: 'development'
  7.   /**********/
  8. })

启动本地服务

  1. // webpack.dev.js
  2. {
  3.     /********/
  4.   devServer: {
  5.         port: 8080,
  6.         progress: true,  // 显示打包的进度条
  7.         contentBase: distPath,  // 根目录
  8.         open: true,  // 自动打开浏览器
  9.         compress: true,  // 启动 gzip 压缩
  11.         // 设置代理
  12.         proxy: {
  13.             // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
  14.             '/api': 'http://localhost:3000',
  16.             // 将本地 /api2/xxx 代理到 localhost:3000/xxx
  17.             '/api2': {
  18.                 target: 'http://localhost:3000',
  19.                 pathRewrite: {
  20.                     '/api2': ''
  21.                 }
  22.             }
  23.         }
  24.     }
  25. }

webpack开发下跨域请求，使用devserver中的代理

处理ES6

  1. {
  2.     ...
  3.   module: {
  4.       rules: [
  5.       {
  6.           test: /\.js$/,
  7.         loader: ['babel-loader'],
  8.         include: srcPath,
  9.         exclude: /node_modules/
  10.       }
  11.     ]
  12.   }
  13. }
  1. // .babelrc
  2. {
  3.     "presets": ["@babel/preset-env"],
  4.   "plugins": []
  5. }

处理样式

  1. {
  2. ...
  3.     module: {
  4.       rules: [
  5.       {
  6.           test: /\.css$/,
  7.         // loader执行顺序，从后往前的
  8.         loader: ['style-loader', 'css-loader', 'postcss-loader']
  9.       },
  10.       {
  11.           test: /\.less$/,
  12.         loader: ['style-loader', 'css-loader', 'less-loader']
  13.       }
  14.     ]
  15.   }
  16. }
  1. // postcss.config.js
  2. /*
  3.     加浏览器前缀的
  4. */
  5. module.exports = {
  6.     plugins: [require('autoprefixer')]
  7. }

处理图片

  1. // webpack.dev.js
  2. module: {
  3.     rules: [
  4.     {
  5.       // 直接引入url
  6.         test: /\.(png|jpg|jpeg|gif)$/,
  7.       use: 'file-loader'
  8.     }
  9.   ]
  10. }
  12. // webpack.prod.js
  13. module: {
  14.     rules: [
  15.     {
  16.         test: /\.(png|jpg|jpeg|gif)$/,
  17.       use: {
  18.           loader: 'url-loader',
  19.         options: {
  20.           // 小于 5kb 的图用base64输出
  21.           // 否则，依然沿用 file-loader 的形式，产出url
  22.             limit: 5 * 1024,
  24.           // 打包到 img 目录下
  25.           outputPath: '/img/'
  27.           // 设置图片的 cdn 地址
  28.           // publicPath: 'http://cdn.abc.com'
  29.         }
  30.       }
  31.     }
  32.   ]
  33. }

output

  1. output: {
  2.   filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
  3.     path: distPath
  4. }
  5. // 为的是内容变，避开缓存