webpack打包文件

搭建设用于自己的webpack项目工程化打包文件配置，

webpack.comfig.js

// package.json : npm init -y
// 移除main入口，安装包私有 
// +   "private": true,
// -   "main": "index.js"

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
//  npm i webpack webpack-cli --save-dev
//      全局安装： npm i --global webpack 
//      最新版本： npm i webpack@beta
const webpack = require('webpack');

module.exports = {
    /*
        entry: 入口文件，有三种类型
            1.字符串： entry: ’./index.js‘ 
                指定从这个文件路径下面作为打包的入口文件
            2.数组： entry: [''./src/'index.js, './vendor/bootstrap.min.js']
                当存在多个入口时，可以使用Array的方式，比如依赖第三方库bootstrap，最终bootstrap会被最佳到打包好的index.js中，数组中的最后一个会被export。
            3.对象： entry: {
                index: './src/index.js',
                a: './src/a.js'
            }
                设置多个打包目标，每一对键值对都对应一个入口文件（常用于多页面入口文件配置）

        output: 指生成的文件输出到哪里去。
            path： 可能对应文件路径，也可能是从url访问的情况下的路径
            filename： 用来配置生成的文件名
    */
    entry: {
        app: './src/index.js',
        // print: './src/print.js'
    },
    plugins: [
        // 重置dist文件夹  npm i clean-webpack-plugin --save-dev
        new CleanWebpackPlugin(),
        // 热更新
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        // 输出html npm i html-webpack-plugin --save-dev
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    output: {
        // filename: 'bundle.js',
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    // 报错信息指向源文件
    devtool: 'inline-source-map',
    // 开发环境
    devServer: {
        contentBase: './dist',
        hot: true
    },
    // build代码压缩
    mode: "production",
    module: {
        rules: [
            // css处理  npm i style-loader css-loader --save-dev
            {
                test: /\.css/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            // 图像处理  npm i file-loader --save-dev
            {
                test: /\.(png|svg|jpe?g|gif)$/,
                use: [
                    'file-loader',
                    {
                        // 图片处理 压缩
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            optipng: {
                                enable: false
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false
                            },
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ]
            },
            // 字体处理
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }

        ]
    }
};

package.json

{
"name": "demo-webpack",
"version": "1.0.0",
"description": "test",
"private": true,
"dependencies": {
  "lodash": "^4.17.15",
  "npm": "^6.10.2",
  "webpack": "^4.38.0",
  "webpack-cli": "^3.3.6"
},
"devDependencies": {
  "clean-webpack-plugin": "^3.0.0",
  "css-loader": "^3.1.0",
  "file-loader": "^4.1.0",
  "html-webpack-plugin": "^3.2.0",
  "image-webpack-loader": "^5.0.0",
  "style-loader": "^0.23.1",
  "webpack-dev-server": "^3.7.2"
},
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "start": "webpack-dev-server --open --compress --host 0.0.0.0"
},
"author": "",
"license": "ISC"
}