前言

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(),// 首页htmlnew 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即可执行。