1.webpack基础介绍：
webpack可以看做是模块的打包机，主要做的事情是，分析项目结构，将一些项目模块找出来，打包成浏览器可以执行的js代码，并把浏览器一些不认识的拓展语言（scss，jsx，vue等）转换成符合浏览器认识的语言。
2.webpack4的基本配置项讲解：
- 首先生成package.json为了记录我们安装过得包:npm init （ps：一直点回车）
- 运行cnpm i webpack webpack-cli --save
`在package.json文件里手动配置scripts脚本中：
//--watch:时刻监听代码
"dev":"webpack -- mode development --watch",
"build":"webpack --mode production"
//(dev为开发模式，build为生产模式）`
文章图片
- npm run dev (出现dist文件夹）
3.入口与出口及单页面与多页面的配置文件(改文件名字）
- 新建一个文件：webpack.config.js
`里面内容写：
//webpack配置文件
// 导出
module.exports={
//配置入口
entry:{
//要写成绝对路径,__dirname指定路径
'index1':__dirname+"/src/main.js",
//'index2':_dirname+"/src/main2.js",
}// 可以配置多个入口
// 配置出口
output:{
//输出到哪
path：_dirname+"/dist",// 打包后的文件存放的地方
filename:"[name].js",// 打包后输出文件的文件名
// 没有dist文件夹，但生成在内存中
publicPath:"/dist/" //虚拟路径，可以访问到我们生成的文件，公共目录
}
}`
【webpack基础原理】4.webpack-dev-server:自动刷新浏览器,热更新
- 运行cnpm i --save webpack-dev-server
webpack.config.js文件里面写// localhost:8080,反向代理....
devServer:{
contentBase:'./', //根目录地址,相对路径
port:8080,
proxy:{},
inline:true // 实时刷新
}然后在packpack.json文件中，在scripts脚本里面添加
"start":"webpack-dev-server --mode development"
5.source-map：映射源代码，方便调试
在webpack.config.js里面写一句：
"devtool":"source-map" //映射源代码目录，方便调试
6.loaders配置：加载器，翻译器（ps：loader有很多，只挑一些常见的）
- css-loader，style-loader（将css文件当成模块处理）
在webpack.config.js添加：
module： {
rules：[
// loader 规则
{
test:/\.css$/,
loader:'style-loader!css-loader' // 添加对样式表的处理，内联样式
// loader:'style-loader!css-loader!postcss-loader' //处理css兼容
}
]
}安装：
cnpm i --save css-loader style-loader
- scss-loader(scss编译成css文件)(安装node-sass）
在webpack.config.js添加：
module： {
rules：[
// loader 规则
{
test:/\.scss$/,
loader:'style-loader!css-loader!sass-loader' // 添加对样式表的处理，内联样式
// loader:'style-loader!css-loader!postcss-loader'
}
]
}安装：
cnpm i --save sass-loader node-sass
- babel-loader（es6 转换成 es5，react）（安装：babel-loader@7 babel-core babel-preset-es2015）
在webpack.config.js添加：
module： {
rules：[
// loader 规则
{
test:/\.js$/, //随便起的test名字
exclude:/node_modules/, //排除一个
//exclude:/(node_modules|src)/, // 排除多个就这样写
loader:'babel-loader' ,
query:{
presets:['es2015']
}
}
]
}
安装：
cnpm i --save babel-loader@7 babel-core babel-preset-es2015
- post-css(处理css兼容性问题）（安装插件：postcss-loader autoprefixer postcss)
安装：
cnpm i --save postcss-loader postcss autoprefixer在webpack.config.js添加：
module： {
rules：[
// loader 规则
{
test:/\.css$/,
loader:'style-loader!css-loader' // 添加对样式表的处理，内联样式
loader:'style-loader!css-loader!postcss-loader' //处理css兼容
},
{
test:/\.scss$/,
loader:'style-loader!css-loader!sass-loader' // 添加对样式表的处理，内联样式
loader:'style-loader!css-loader!postcss-loader!sass-loader'//处理css兼容
}
]
}创建一个postcss.config.js
module.exports = {
plugins: [
// 兼到最新的100个浏览器，这样会导致代码体积变大
//require('autoprefixer')('last 100 versions')
require('aytoprefixer')(
{
browsers:[
// 兼容最新浏览器
'last 10 Chrome versions',
'last 5 Firefox versions',
'Safari >= 6',
'ie > 8',
'ios >= 8',
'Android >= 4.4'
]
}
)
]
}
- vue-loader（安装：vue-loder vue-template-compiler）对vue解析
在webpack.config.js添加：
//webpack配置文件
const {VueLoaderPlugin} = require("vue-loader)
module.exports={
rules: [
{
// 处理.vue文件的loader
test:/\.vue$,
use:'vue-loader'
}
]
},
//vue-loader插件：
plugins: [
new VueLoaderPlugin()
]安装：
cnpm i --save vue-lodervue-template-compiler
- file-loader,url-loader(文件copy到目录文件夹）
（url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数）
