webpack前端打包工具

妖狐艹你老母 2021-07-26 01:33 572阅读 0赞

# 前言 #

webpack是前端人员常用到的打包工具，包括vuecli搭建自带的webpack.

# 什么是webpack? #

webpack可以理解为，将程序员编写的源代码，经过压缩/编译/于法检测。。。等一系列的操作，编译成浏览器可以识别的代码，优化性能。webpack是个前端打包器，前端所有的资源都可以当作模块进行打包。

# webpack四大核心概念 #

*  entry（入口文件，要编译i的js文件，可以是多个）
 *  output （输出文件）
 *  loader（让webpack可以处理非js/json文件，如less/img等）
 *  plugins（插件，处理loader处理不了的，比如：清空输出文件）

# 先安装node,再安装webpack #

npm install -g webpack
    npm install -g webpack-cli

或者

npm install webpack -g
    npm install webpack --save-dev

安装webpack-cli的代码

npm install -g webpack-cli
    npm install --save-dev webpack-cli

安装的过程中，如果npm安装没有反应，可以使用cnpm进行安装，也是需要先提前安装cnpm的。  
`webpack -v`通过这个命令可以进行检测webpack是否安装成功，如果出现版本号，则代表安装成功。

# webpack模板 #

// 单独提取css文件
    var MiniCssExtractPlugin = require('mini-css-extract-plugin');
    // 清理out文件夹
    var {  CleanWebpackPlugin } = require('clean-webpack-plugin');
    // 抽离html文件
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = { 
        // 入口
        entry:{ 
            index:'./src/js/meituan.js',
            info:'./src/js/goodsInfo.js'
        },
        // 出口
        output:{ 
            filename:'[name]-[hash:5].js',
            path:__dirname + '/out'
        },
        // loaders使用
        module:{ 
            rules:[
                // js
                {  test: /(\.js)$/, use:['babel-loader'] },
                // css
                {  test:/(\.css)$/, use:[MiniCssExtractPlugin.loader,'css-loader'] },
                // 处理图片及字体图标
                {  test: /(\.jpg|png|svg|eot|ttf|woff)/,use:['url-loader?limit=1000&name=./[name].[ext]']}
            ]
        },
        plugins:[
            // 抽离css文件
            new MiniCssExtractPlugin({ 
                filename:'[name]-[hash:5].css'
            }),
            // 清理out文件夹
            new CleanWebpackPlugin(),
            // 首页html
            new HtmlWebpackPlugin({ 
                template:'./meituan-index.html',
                filename:'index.html',
                minify:{ 
                    // 移除注释
                    removeComments:true
                },
                // 对应引入的js包
                chunks:['index']
            }),
            // 跳转页
            new HtmlWebpackPlugin({ 
                template:'./meituan-detail.html',
                filename:'detail.html',
                minify:{ 
                    removeComments:true
                },
                chunks:['info']
            })
        ],
        mode:'development',
        devServer:{ 
            port:'9191'
        }
    }

# webpack代码执行 #

直接在命令行中输入 `webpack`即可执行。