webpack有4个重点内容：
入口(entry)：指示webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
输出(output)：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist
加载器(loader)：loader 让 webpack 能够去处理那些非 JavaScript 文件，比如css，图片
插件(plugins)：插件可以用于执行范围更广的任务，比如打包优化和压缩
随时切换镜像源：?
1. npm install nrm -g // 安装nrm?
2. nrm ls // 查看镜像源?
3. nrm use taobao // 选择淘宝镜像，也可以选择cnpm
webpack安装
npm init -y
npm i webpack -D
npm i webpack-cli -D
webpack初始使用
根目录下面新建src目录，在该目录下面创建自己的js文件
然后运行
npx webpack将创建出来的js文件打包，(会生成一个dist目录，默认打包出来的文件是main.js)此时会有警告，意思是mode选项没有设置。mode模式有两种，一种是deveopment，一种是production添加mode选项，运行命令
npx webpack --mode development修改代码，自动重新打包，运行命令
npx webpack --mode development --watc
webpack热更新
安装`npm i webpack-dev-server -D
let path = require(‘path‘)module.exports = { ?// 入口文件配置 ?entry: "./src/index.js", ?// 出口文件配置项 ?output: { ???// 输出的路径，必须是绝对路径 ???path: path.join(__dirname, ‘dist‘), ???// 输出文件名字 ???filename: "bundle.js", ???// 2. 静态资源打包出来在服务器上运行时的访问路径，可以直接http://localhost:8080/dist/bundle.js访问到服务器中的bundle.js文件 ???publicPath: ‘/dist‘ ?}, ?mode: ‘development‘}index.html中修改
<script src="/dist/bundle.js"></script>运行：
npx webpack-dev-server运行：
npx webpack-dev-server --inline --hot --open --port 8090--hot热重载配置script：
"dev": "webpack-dev-server --inline --hot --open --port 8090"npm run dev
webpack配置文件(针对Vue)
配置webpack.config.js
运行
npx webpack
let path = require(‘path‘)let HtmlWebpackPlugin = require(‘html-webpack-plugin‘)module.exports = { ???// entry 属性表示入口文件路径 ???entry: ‘./src/index.js‘, ???// output表示输出配置 ???output: { ???????// path属性表示输出路径 该路径只能为一个绝对路径 ???????path: path.join(__dirname, ‘dist‘), ???????// filename属性表示给输出的文件取名 ???????filename: ‘bundle.js‘, ???????//publicPath 表示静态资源在服务器的存放路径 ???????// publicPath: ‘/dist‘ ???}, ???// module属性用来处理文件模块 ???module: { ???????// rules 主要用来表示各种文件使用哪种loader加载器 ???????rules: [ ???????????{ ???????????????// test表示处理的文件类型，它后面跟一个正则 ???????????????test: /\.css$/, ???????????????// use表示使用哪些loader ???????????????use: [ ???????????????????{ loader: "style-loader" }, ???????????????????{ loader: "css-loader" } ???????????????] ???????????}, ???????????{ ???????????????test: /\.less$/, ???????????????use: [{ ???????????????????loader: ‘style-loader‘ ???????????????}, { ???????????????????loader: ‘css-loader‘ ???????????????}, { ???????????????????loader: ‘less-loader‘ ???????????????}] ???????????}, ???????????{ ???????????????test: /\.scss$/, ???????????????use: [{ ???????????????????loader: ‘style-loader‘ ???????????????}, { ???????????????????loader: ‘css-loader‘ ???????????????}, { ???????????????????loader: ‘sass-loader‘ ???????????????}] ???????????}, ???????????{ ???????????????test: /\.(png|jpg|gif|eot|svg|ttf|woff)/, ???????????????use: [{ ?????????????????loader: ‘url-loader‘, ?????????????????// options表示配置项 ?????????????????options: { ???????????????????// limit属性表示如果图片大小大于limit参数的值，那就用路径的形式展示；如果图片小于limit参数的值，那就用base64格式展示。（单位是b） ???????????????????limit: 40000 ?????????????????} ???????????????}] ???????????}, ???????????{ ???????????????test: /\.m?js$/, ???????????????exclude: /(node_modules|bower_components)/, ???????????????use: { ?????????????????loader: ‘babel-loader‘, ?????????????????// options: { ?????????????????// ??presets: [‘@babel/preset-env‘] ?????????????????// } ???????????????} ???????????} ???????] ???}, ???// 插件 ???plugins:[ ???????new HtmlWebpackPlugin({ ???????????// template 表示最后生成的HTML页面以哪个文件为模板 ???????????template:‘template.html‘, ???????????// filename表示最后根据模板页面生成的新的HTML页面 ???????????filename:‘index.html‘ ???????}) ???], ???// 指定mode为开发模式 ???mode:‘development‘}对应的.babelrc
{ ???"presets": ["@babel/preset-env"]}对应的package.json文件(相应npm安装包即可)
{ ?"name": "test-webpack", ?"version": "1.0.0", ?"main": "index.js", ?"scripts": { ???"dev": "webpack-dev-server --inline --hot --open --port 8090" ?}, ?"keywords": [], ?"author": "", ?"license": "ISC", ?"devDependencies": { ???"@babel/core": "^7.1.6", ???"@babel/preset-env": "^7.1.6", ???"babel-loader": "^8.0.4", ???"css-loader": "^1.0.1", ???"file-loader": "^2.0.0", ???"html-webpack-plugin": "^3.2.0", ???"less": "^3.8.1", ???"less-loader": "^4.1.0", ???"node-sass": "^4.10.0", ???"sass-loader": "^7.1.0", ???"style-loader": "^0.23.1", ???"url-loader": "^1.1.2", ???"vue-loader": "^15.4.2", ???"vue-template-compiler": "^2.5.17", ???"webpack": "^4.26.0", ???"webpack-cli": "^3.1.2", ???"webpack-dev-server": "^3.1.10" ?}, ?"dependencies": { ???"vue": "^2.5.17", ???"vue-router": "^3.0.2" ?}, ?"description": ""}
webpack简单配置
原文地址：https://www.cnblogs.com/ressiry/p/10502754.html