配置webpack
1 新建一个文件夹，cmd进入该文件夹
2 初始化
npm init -y
npm install webpack webpack-cli webpack-dev-server --save-dev
想要支持ES6，需要安装babel依赖
babel：js编译平台
作用：让浏览器支持下一代JS(ES6，ES7.....)代码，支持使用基于js的进行语言拓展，如：Ract的JSX
3. 安装babel
npm install --save-dev babel-loader babel-core babel-preset-es2015
解析：
babel-core：babel核心包
babel-loader：babel加载包
babel-preset-es2015：解析ES6的包
4. 创建webpack.config.js文件如下
5.新建dist文件夹
// 引入node的path模块
const path = require('path');
// 指定返回接口的集合
module.exports = {
mode:"production",
// production:生产模式
// development：开发模式
// none：无模式
// 打包的入口文件
entry:"./js/index.js",
// 打包的输出文件地址和文件名
output:{
path:path.resolve(__dirname,"dist"),
filename:"main.js"
},
// 模块设置
module:{
// 模块规则
rules:[
{
test:/\.js?$/,
exclude:[
path.resolve(__dirname,"node_modules")
],
loader:"babel-loader",
options:{
presets:["es2015"]
}
}
]
}
}
6.创建js文件夹
在js文件夹中创建index.js内容为
console.log("我是入口js文件");
7. 执行 npx webpack
报错：
ERROR in ./js/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
执行：npm i babel-loader@7.1.5 -D
然后 npx webpack
8.新建index.html
引入打包成功的main.js文件
<script src="dist/main.js"></script>
9.启动webpack服务器
在webpack.config.js中的输出对象output中添加属性
publicPath："/public/"
// webpack-dev-serber提供的虚拟文件夹(在内存和硬盘都找不到)
// 好处：1，内存速度更快，提升编译速度
// 2，保护硬盘
将index.html内容修改为
<script type="text/javascript" src="./public/main.js"></script>
10.执行：node_modules\.bin\webpack-dev-server
执行成功说明webpack提供的本地服务器启动成功，此时可以在浏览器中访问http://localhost:8080
这种方法文件路径不好操作
修改：package.json
将“main”：“index.js”修改成：“webpack.config.js”，
在"test": "echo \"Error: no test specified\" && exit 1",下面加
"start:dev": "webpack-dev-server"
CMD执行：
ctrl + c：退出服务器
再执行：
npm run start:dev
安装vue
下载vue指令
npm install --save vue
import Vue from "vue";
修改
new Vue({
el: "#app",
data: {
a: 1
}
修改index.js
添加：divid="app">
<h1>{{a}}</h1>
</div>
在webpack.config.js中加入resolve属性
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
// 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
}
然后执行npx webpack
npm run start:dev
修改index.js的msg值，无需刷新会自动打包
