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使用