webpack 配置入门

Posted 2020-11-30 佑之以航

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"
  }
}