webpack打包前端项目

webpack的安装和配置

项目初始化

在webpack安装之前我们要进行项目初始化，生成一个package.json文件

npm init -y 输入这个命令行进行项目初始化

webpack安装

安装webpack和webpack-cli

npm i webpack webpack-cli --dev

webpack配置

在package.json文件的scripts中配置启动命令

“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev”: “webpack”,
“start”: “webpack serve”
}

创建webpack的入口文件

webpack默认的入口文件是src目录下的index文件，我们需要在项目的根目录下创建src文件夹，在src文件夹里面创建一个index文件。

webpack支持的模块化

• CommonJS

    // 模块导出
	module.exports = {}
	//  模块导入
	const res = requrie('模块url')

• es6

       //  模块导出
		export default 模块名
		export 模块对象
		
		//  模块导入
		import  ... from '模块url'

webpack的配置文件

对webpack 进行配置，需要在项目根目录下创建配置文件 webpack.config.js，该文件是一个模块

webpack的入口

const path=require('path')
module.exports = {
//单一的入口文件
entry:index.js;

//多个入口文件，将entry的值设为数组
entry:['index.js', 'main.js',...]
}

webpack的出口

output: {
		//设置出口文件的目录
        path: path.resolve(__dirname, "dist"),
        //自动映射，也就是原本是什么名字就是什么名字
        filename: '[name].js'
    }

mode配置选项

mode的取值一般来说有三个：

• development：开发模式，打包更快速，省了代码优化的步骤
• production：生产模式，打包比较慢，开启了 tree-shaking 和 压缩代码
• none：不使用任何默认优化选项

mode: 'development'

完整的webpack配置文件示例

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader/dist/index')
//清除dist目录下的文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
//为了打包快速，使用了开发模式
    mode: 'development',
    //webpack入口文件是main.js
    entry: './main.js',
    //出口文件位置
    output: {
        path: path.resolve(__dirname, "dist"),
        //原本是什么名字就是什么名字
        filename: '[name].js'
    },
    module: {
        rules: [{
        //解析js文件
            test: /\.js$/,//解析什么样的文件
            //解析src目录下的文件，一般都不会包括node_modules文件夹下的文件，太大了
            include: ['/src'],//解析包含的哪些文件 exlude不包含哪个文件
            //借助 Loader 来对不同类型的文件的进行处理
            loader: 'babel-loader',
            options: {
                "presets": [
                    ["@babel/preset-env"], {
                    // 指定按需加载
                        "useBuiltIns": "usage",
                        // 指定core-js的版本,这个在package.json文件里查看一下自己下载的版本号
                        "corejs": {
                            "versiom": 3
                        },
                         // 指定兼容的浏览器版本
                                "targets": {
                                    "chrome": "60",   
                                }
                    }
                ]
            }
        },
        {
            test: /\.vue$/,//以Vue结尾的文件
            loader: "vue-loader"
        },
        {
            test: /\.css$/,//处理css文件
            use: [MiniCssExtractPlugin.loader, "css-loader"]
        },
        {
        //处理图片资源
            test: /\.(jpg|png|jpeg|gif|bmp|PNG)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 1024, //如果是1024个字节以内的图片，使用url-loader处理，如果大于1024个字节，则使用file-loader处理
                    fallback: {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]' //打包后的文件名字用文件原本的名字和扩展名
                        }
                    }
                }
            }
        }
        
    ]
},
    plugins: [
        new HTMLWebpackPlugin({
            //将来webpack是以./src/public/index.html作为模板生成的一个index.html文件
            template: "./index.html",
            filename: 'index.html',
            //html文件标题是vue项目
            title: 'vue项目',
            minify: {
                collapseWhitespace: true, // 去掉空格
                removeComments: true // 去掉注释
            }
        }),
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin(),
        new CssMinimizerPlugin()


    ],
        devServer: {
        port: 3000,
        hot: true,
        open: true,
    },

}

执行命令

npm run dev 即可对项目进行打包，打包好的文件在dist目录下