Webpack「一」-- 基本配置

1.拆分配置和merge

webpack配置文件拆分为：
webpack.common.js 存放公共配置
webpack.dev.js 存放开发环境配置
webpack.prod.js 存放生产环境配置

开发环境 和 生产环境 分别引入 webpack.common.js：

安装webpack-merge以用来引入webpack.common.js：

const webpackCommonConf = require('./webpack.common.js')
const { merge } = require('webpack-merge')
module.exports = merge(webpackCommonConf,{
    ...
})

在package.json里配置：

"scripts": {
    "dev": "webpack-dev-server --config build/webpack.dev.js",
    "build": "webpack --config build/webpack.prod.js"
},

运行 npm run dev执行开发环境的打包
运行 npm run build执行生产环境的打包

2.启动本地服务

在开发环境下配置[webpack.dev.js]:

需要安装 webpack-dev-server

devServer: {
    port: 8080, //端口
    progress: true, // 显示打包的进度条
    contentBase: distPath, // 根目录
    open: true, // 自动打开浏览器
    compress: true, // 启动 gzip 压缩

    // 设置代理 
    proxy: {
    // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
    '/api': 'http://localhost:3000',

    // 将本地 /api2/xxx 代理到 localhost:3000/xxx
    '/api2': {
        target: 'http://localhost:3000',
        pathRewrite: {
        '/api2': ''
        }
    }
    }
}

3.处理ES6

在公共环境下配置[webpack.common.js]:

module:{
  rules:[
    {
      test: /\.js$/,
      loader: ['babel-loader'],
      include: srcPath,
      exclude: /node_modules/
    }
  ]
}

用babel-loader处理ES6

配置.babelrc

{
    "presets": ["@babel/preset-env"],//preset-env常规插件打包配置
    "plugins": []
}

4.处理样式

在公共环境下配置[webpack.common.js]:

module:{
  rules:[
    {
    test: /\.css$/,
    // loader 的执行顺序是：从后往前
    loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
    },
    {
      test: /\.less$/,
      // 增加 'less-loader' ，注意顺序
      loader: ['style-loader', 'css-loader', 'less-loader']
    }
  ]
}

postcss-loader 做浏览器兼容性
配置postcss.config.js

module.exports = {
  plugins: [require('autoprefixer')] //默认加前缀，如-webkit
}

5.处理图片

在开发环境下配置[webpack.dev.js]:

module:{
  rules:[
    // 直接引入图片 url
    {
      test: /\.(png|jpg|jpeg|gif)$/,
      use: 'file-loader'
    }
  ]
}

在生产环境下配置[webpack.prod.js]:

module:{
  rules:[
    // 图片 - 考虑 base64 编码的情况
    {
      test: /\.(png|jpg|jpeg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          // 小于 5kb 的图片用 base64 格式产出
          // 否则，依然延用 file-loader 的形式，产出 url 格式
          limit: 5 * 1024,

          // 打包到 img 目录下
          outputPath: '/img1/',

          // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
          // publicPath: 'http://cdn.abc.com'
        }
      }
    },
  ]
}

6.出口文件配置hash

在生产环境下配置[webpack.prod.js]:

output: {
    filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳,内容改变时，hash值改变，避免访问缓存
    path: distPath,
}

7.模块化

使用import 需要引入webpack使用