首先介绍一个安装webpack的百度经验：https://jingyan.baidu.com/article/a3a3f811230ee58da3eb8a6e.html
推荐一个详细介绍webpack的博客：https://my.oschina.net/lsjcoder/blog/1803141
安装babel==》https://blog.csdn.net/lhtzbj12/article/details/79188342
1、webpack是什么东西？干什么用的:它一个模块打包器
- 作用：
- 1、可以当做一个服务器
- 2、将浏览器不识别的js语法转换为浏览器识别的js语法（将ES6转为可识别的ES5）
- 3、将我们的模块进行打包 ......
通过npm全局安装的工具
C:{管理员账号路径}AppDataRoaming
pm
全局安装webpack :
(1). npm install webpack@3 -g;
(2). npm install webpack -dev - server@2 -g;
本地安装
npm install webpack@3 -D;
npm install webpack - dev - server@2 -D;
2、webpack工作的原理：
入口文件-->module(loader 处理 配置.....)---出口文件
（1）、npm init -y 初始化文件
（2）、局部安装webpack cnpm install webpack@3 --save-d （3）、创建一个webpack.config.js
//引入node的核心模块
注：以下为js代码
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
//配置路径
const PATH = {
/*
path.join将第一个路径和第二个路径结合起来
生成一个新的路径
__dirname:当前文件的绝对路径
*/
app:path.join(__dirname,"src/index.js"),
main:path.join(__dirname,"dist/")
}
// 忽略文件：
创建一个.gitignore文件将node_modules文件忽略：.gitignore文件中写入 node_modules;
//配置文件
module.exports = {
//入口文件的配置信息
entry:{
//入口文件的地址
app:PATH.app
},
//出口文件的配置信息
output:{
//打包完成以后的js文件的名称
filename:"[name].js",
//打包完成以后的js文件放置的位置
path:PATH.main
},
module:{
rules:[
{
//匹配哪些文件用以下的loader
test:/.js$/,
use:{
loader:"babel-loader",
//将ES6的代码转换为ES5的代码
options:{
presets:["env"]
}
}
},
{
test:/.(css|scss)$/,
//从右到左 从下到上
use:[
"style-loader",
"css-loader",
"sass-loader"]
}
]
},
plugins:[
//自动帮我们创建一个html文件 帮我们把相关的js进行引入
new htmlWebpackPlugin({
//生成html文件的明细
filename:"newIndex.html",
template:"index.html",
title:"德玛西亚",
header:"<h1>诺克萨斯</h1>",
list:["张三","李四","陈亮"]
}),
new htmlWebpackPlugin({
//生成html文件的明细
filename:"list.html",
template:"index.html",
title:"德玛西亚",
header:"<h1>诺克萨斯</h1>",
list:["张三","李四","陈亮"]
})
]
}
/*以上这种打包方式在4.0中以废除了,4.0以下版本还可以正常使用*/
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react；
安装vue-loader:cnpm install vue-laoder@8.5.4 --save-dev:
cnpm install vue-html-loader --save-dev
vue-html-loader css-loader vue-style-loader vue-hot-reload-api@1.3.2
cnpm install vue-laoder@8.5.4 --save-dev
cnpm install vue-html-loader --save-dev
vue-html-loader css-loader vue-style-loader vue-hot-reload-api@1.3.2
将项目中的多个模块进行打包，把凡是js html css 等文件通过loader的方式进行模块打包
1.env的配置
无法解析es6的函数或者类
Set,Map,Promise,Array.from
使用balble-preset-es2015/bable-perset-env不能解析
解决方式：
方式1：balble-polyfill
全局的，对全局变量进行定义。为开发应用（插件，框架），做准备
npm install bable-polyfill -S
方式2.bable-plugin-transform-runtime
编译时解析的，外开发项目框架准备
npm install bable-plugin-tramsform-runtime -D