webpack零开始配置简单项目

前端这点事 703 0

项目里用webpack很多,不过很多都是脚手架生成好的,那现在如果有个项目,老大让你不用vue、react那些脚手架,简单的搭建一个可以进行css压缩、js压缩、ES6转换、图片压缩的

简单项目,你要怎么做?

很简单,按照下面操作,就可以简单实现以上要求的基础配置~~

  1. mkdir webpack-pro && cd webpack-pro && yarn init && yarn add webpack webpack-cli -S (webpack 部分功能转移到webpack-cli)

  2. package.json 新增 scripts;

"scripts": {
    "build": "webpack",
    "dev": "webpack"
  },
  1. 新建webpack.config.js,配置entry、output、module、plugins等相关配置;

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 把css文件单独分离出来
const HtmlWebPackPlugin = require("html-webpack-plugin"); // 将打包的js注入到html模板
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //清除之前打包的文件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩css
const handleCurDir = name => {
    return path.join(__dirname, name);
}
module.exports = (env, argv) => {
    const devMode = argv.mode !== 'production';
    return {
        entry: [
            "babel-polyfill",
            handleCurDir('./src/index.js')
        ],
        output: {
            filename: '[name].[chunkhash:8].js',
            path: handleCurDir('./dist')
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    }
                },
                {
                    test: /\.css$/,
                    use: [
                        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                        'css-loader',
                        'postcss-loader'
                    ]
                },
                {
                    test: /\.html$/,
                    use: [{
                        loader: "html-loader",
                        options: {
                            minimize: true
                        }
                    }]
                },
                {
                    test: /\.(png|svg|jpg|gif|jpeg|ico|woff|woff2|eot|ttf|otf)$/,
                    use: [
                        {
                            loader: 'url-loader', // 根据图片大小,把图片优化成base64
                            options: {
                                name: '[name]_[hash].[ext]',
                                outputPath: 'images/',
                                limit: 10000
                            }
                        }]
                }

            ]
        },
        plugins: [
            new MiniCssExtractPlugin({     // 分离css
                filename: "[name].[chunkhash:8].css",
                chunkFilename: "[id].[chunkhash:8].css"
            }),
            new HtmlWebPackPlugin({            // 将打包好的文件注入html模板
                template: "./src/index.html",
                filename: "./index.html"
            }),
            new CleanWebpackPlugin(), // 清理之前的打包文件
            new OptimizeCssAssetsWebpackPlugin(), //压缩css文件
        ]
    }
}

配置比较简单,附上git仓库地址:https://github.com/zzxiexin/webpack-prohttps://github.com/zzxiexin/webpack-pro/blob/single-page/webpack.config.js

标签: webpack

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~