webpack 配置入門

webpack.config.js

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin') // js與頁面產生關聯
let MiniCssExtractPlugin = require('mini-css-extract-plugin') // 打包css使之獨立出來，並被html引用

// env 是內置參數 能夠反應當前運行的環境
module.exports = env => {
    return {
        mode: env, // 開發 或者 正式環境
        entry: './index2.js', // 入口文件（從哪裏開始）
        output: {
            filename: './js/bundle.js', // 加文件路徑會自動建立文件夾
            path: path.resolve(__dirname, 'dist') // 出口文件夾名
        },
        devtool: 'source-map', // 開發環境更好觀察打包的代碼
        module: {
            rules: [{
                test: /\.js$/, // 檢測以js結尾的文件
                exclude: /node_modules/, // 除了此文件夾之外的文件
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        cacheDirectory: true // 打包時優先利用緩存 提高打包效率
                    }
                }
            }, {
                test: /\.(c|le|sc)ss/, // 檢測css less scss文件
                use: [{
                    loader: MiniCssExtractPlugin.loader // 把引入的css放入css文件夾 link標籤引入 不會直接進入頁面style
                }, 'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [require('autoprefixer')('last 10 versions')] // 解決css瀏覽器兼容性
                    }
                }, 'sass-loader']
            }, {
                test: /\.(png|jpg|gif|svg|jpeg)$/, // 檢測圖片的類型
                use: {
                    loader: 'url-loader', // 若是設置limit 會對小於該數值的圖片進行base64位的轉換 若是大於則直接拷貝
                    options: {
                        publicPath: '../images', // 打包圖片的存放路徑 若是不加../ 會有問題
                        outputPath: 'images', // 打包存放圖片的文件夾名
                        limit: 30 * 1024, // 以此數值進行劃分是否轉換base64
                        name: '[name].[ext]' // 以圖片原有名保存，不配置則是隨機碼命名
                    }
                }
            }]
        },
        plugins: [
            new HtmlWebpackPlugin({ // 打包後的js與html文件的關係配置
                title: '測試', // 打包後html title的文案
                filename: 'index.html', // 打包後的html文件名
                minify: {
                    removeComments: false, // 是否刪除換行
                    collapseWhitespace: false // 是否刪除空格
                },
                template: 'index.html' // 配置後使用當前html做爲模版來渲染
            }),
            new MiniCssExtractPlugin({ // 存放打包後css的路徑
                filename: "./css/index.css"
            })
        ]
    }
}

pachage.json

{
  "name": "webpack3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "rimraf dist && webpack --env=production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.41.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "autoprefixer": "^9.7.1",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "url-loader": "^2.2.0",
    "webpack-cli": "^3.3.10"
  }
}