webpack简介&配置项解析

欢迎加入qq群(IT-程序猿-技术交流群)：757345416

webpack简介：

• webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

• webpack是一个模块加载器及打包工具

webpack配置项：

在项目根目录新建webpack.config.js文件：

//引入->path模块，路径使用
const path=require('path');
//引入->将模板文件拷贝到打包目录，并自动引入script标签
const HtmlWebpackPlugin=require("html-webpack-plugin");
//引入->打包前将原打包文件删除
const CleanWebpackPlugin=require("clean-webpack-plugin");
//引入->压缩打包后的文件
const UglifyJSPlugin=require("uglifyjs-webpack-plugin");

//配置文件是一个{}
module.exports={
    //入口文件配置

    entry:"./src/js/index.js",

    //打包目录&文件名
    output:{
        path:path.resolve(__dirname,"build"),
        //HtmlWebpackPlugin自动引入的script标签与此相同
        filename:"js/bundle.js"
    },

    //插件配置
    plugins:[
        //实例化HtmlWebpackPlugin
        new HtmlWebpackPlugin({
            //打包后的模板文件名
            filename:"index.html",
            //模板文件路径
            template:"./src/index.html"
        }),
        //打包时要清除的原打包文件夹
        new CleanWebpackPlugin(['build']),
        //压缩打包后的文件
        new  UglifyJSPlugin()
    ],

    //loader配置
    module:{
        loaders:[
            //css
            {
                test:/\.css$/,
                loader:"style-loader!css-loader"
            },

            //图片
            {
                test:/\.(jpg|png|gif)$/,
                loader:"url-loader",
                options:{
                    //限制小于10000字节的进行base64转码，如文件大于限制的字节，则与file-lodaer等价
                    limit:10000,
                    //打包后制定目录为"img/原文件名_hash值.原文件扩展名"
                    name:"img/[name]_[hash].[ext]"
                }
            },

            //字体图标
            {
                test:/\.(eot|svg|ttf|woff|woff2)$/,
                loader:"file-loader"
            },

            //react
            {
                //要编译的文件
                test:/\.jsx?$/,
                //装载的模块
                loader:"babel-loader",
                //忽略编译的文件夹
                exclude:/node_modules/,
                //具体的编译类型
                query:{
                    //不压缩
                    compact:false,
                    //要编译的是react
                    presets:["react"]
                }
            }
        ]
    },

    //自动检索扩展名，此扩展名可省略
    resolve:{
        extensions:[
            ".jsx",
            ".less",
            ".js",
            ".css"
        ]
    }
}

文章到此结束，希望对你的学习有帮助！