webpack理解與基礎配置格式

webpack

1. 唯一功能:打包
2. 本身只認識 js 文件
3. loader : 幫助 webpack 處理js以外的文件
4. loader先與webpack運行,預處理文件
5. 單入口、多入口 “” or {}

例如: 
css-loader
- 加載css文件
- 包裝成webapck認識的狀態(就是js形式,變成一個字符串)
- 讓webpack編譯的時候,遇到css文件不報錯.
style-loader
將樣式變成頁面的style標籤(原理就是用js的語法將css-loader生成的字符串創建一個標籤)

postcss-loader
autoprefixer -- 這是一個plugin 增強webpack功能

以上loader也可自定義options,只是默認的就夠用了.

file-loader   讀取並且輸出文件
url-loader    讀取並且輸出base64

dev-server
直接啓動不行，必須放在scripts
  "scripts": {
    ...,
    "start": "webpack-dev-server"
  }

3.直接訪問
  注意路徑(內存更新了,文件沒更新)

配置格式:

const path=require('path');

module.exports={
  mode: 'development',
  entry: './src/js/1.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.min.js'
  },
  module: {
    rules: [
      {test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']},
      {test: /\.(jpg|png|gif)$/i, use: {
        loader: 'url-loader',
        options: {
          outputPath: 'images/',
          limit: 8*1024
        }
      }},
      {test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader']},
      {
        test: /\.jsx?/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  devtool: 'source-map'
};