webpack是一个打包工具，用来打包各种类型的文件。核心是依赖和模块，webpack会把所有资源都看成模块来进行模块化开发，通过webpack可以更好的管理各模块间的依赖。
webpack依赖于node环境，安装完node之后也自然有包管理工具npm了
进入node项目中初始化node项目 npm init => 创建package.json文件
package.json文件用于管理node项目中npm安装的包
全局安装：npm i webpack –g
项目内安装：
开发依赖安装 npm i –D webpack
如果要安装开发环境的webpack服务的话还要安装webpack-dev-sever => 热更新页面
npm i –D webpack-dev-sever
这样package.json里的devDependencies会多两个key:value
这里的版本是不确定版本
想看实际的版本可以在package-lock.json中找
通过 webpack 要打包的文件路径名 打包后的文件路径名 来进行文件打包
eq：webpack ./index.js ./js/bounle.js
这里的webpack命令用的是全局安装的webpack，怎样才能用项目中安装的webpack呢？、
这就需要我们配置package.json文件中的scrpit属性
"build": "webpack"
"dev": "webpack-dev-server"
这样就能通过 npm run build 命令来打包代码
但是这里的命令并没有指明文件位置呀？这时候就要配置我们的webpack.config.js了
先来看看webpack.config.js里面有什么需要配置的
可以看到主要配置的有：entry,output,module,resolve,plugins,watch,devServer
entry:‘./src/index.js‘,//定义入口文件
output:{//定义出口文件
//用path模块里的resolve动态获取文件的绝对路径
path:path.resolve(__dirname,‘./dist‘),
filename:‘bundle.js‘
//由于index.html存在于src下，需要把html中的资源路径指向dist文件夹（加载html打包插件后可以删除）
//,publicPath:‘./dist‘
}
可以看出这两个是配置出口文件和入口文件的
到这里应该清楚了为什么前面的package.json里没有指定文件了，因为执行webpack时会找到项目中局部安装的webpack模块，模块又会自动找到项目根路径中的webpack.config.js文件，读取里面的配置找到要打包的文件和要输出的文件的路径位置。
用npm run请注意：如果项目中有安装webpack则调用项目的webpack，否则用的是全局安装的webpack
这里要注意的是配置出口文件的格式：
要应用nodejs自带的path模块来动态获取文件的绝对路径
module中有个规则rules数组
rules用来配置webpack打包文件时对应的规则，里面传入多个规则对象
要安装对应的加载器 ‘style-loader‘,‘css-loader‘ 通过开发依赖安装 npm i –D
同理配置下面多个规则
安装‘style-loader‘,‘css-loader‘,‘sass-loader‘,’node-sass’
安装‘url-loader‘,‘file-loader‘
options中定义了限制小于8kb时用‘url-loader‘，大于时会默认加载‘file-loader‘，并且如果通过‘file-loader‘打包时图片应该怎样命名 。这里配置了图片会放进img文件夹，在原来名字后面加上8为hash值，并保持原来的扩展名
用’url-loader‘会把图片转成base64位字符串来传输，大于时直接把图片资源一起打包进disk文件夹内，到时用到图片则直接通过路径访问disk中的静态文件夹static
安装"babel-core""babel-loader""babel-preset-env"
配置vue组件规则 => 读到vue组件文件时应该怎么处理
安装"vue-loader""vue-template-compiler"
这里配置后还要解决vue文件的指向问题，为啥？
如果你的main.js入口文件里new vue实例是通过组件的话，那就说明你的项目运行要依赖
Runtime+Compiler而vue-loader自动加载的版本是runtimeonly版，runtimeonly版识别不了
网页上template这东西，所以需要给vue-loader重定向
怎么重定向？这里就要配置resolve了
resolve里有个alias对象，通过这个对象可以起别名，当webpack找到与这些别名相同的字符时就会进行重定向，这里面就是重定向了以vue为结尾的文件，将其指向有编译器的vue.esm.js中
重定向在项目开发的资源路径问题上也有巨大的帮助
@符号在vue脚手架3中默认指向了src目录 common中放置公用的js
asset中放置公用的图片和样式文件 components中放置组件 views中放置页面视图
public中放置静态资源 => 大量图片 json数据文件 音频 视频等
这里面配置的是webpack打包插件
这里面配置了一个html文件打包的插件 用于把inde.html一起打包进disk中
这之前要记得先安装插件"html-webpack-plugin"
"uglifyjs-webpack-plugin"这个是用来压缩js代码的插件
设置watch:true 时每次文件被更改保存后，都会自动执行npm run build来打包编译
devServer用来配置webpack-dev-sever服务
这里补充一下webpack-dev-sever的资料
启动webpack-dev-sever后，服务器会在contentBase的url位置启动服务，并在内存中打开boundle.js,之后每次代码修改后都会被映射到内存中的这个boundle.js中，但这并不会修改到正真的boundle.js，所有的操作只是在内存的级别上，并无保存进磁盘。
想要服务器默认打开浏览器可以在package.json中配置"dev": "webpack-dev-server –open”
因为开发环境和生产环境是分开的 （其实就是开发调试时和最后的编译需要的东西是不一样的没必要放在一个配置文件中）
于是把webpack.config.js分成了3部分
开发配置文件dev.config.js
生产配置文件pro.config.js
要完成分离是需要一个第三方模块支持‘webpack-merge‘，于是必须先安装它
‘webpack-merge‘被用来合并配置文件，具体方法参见图片。
最后还必须重新指定配置文件的位置，我们可以回到package.config.js通过命令行来指定
这样使用npm run 命令后webpack就会重定向配置文件的位置，原本默认是会去根目录找webpack.config.js的文件
原文：https://www.cnblogs.com/chujunqiao/p/11638821.html