决定不懒了。还是写一下简书。
webpack 把前端模块化的代码转化为浏览器支持的代码，做一个底层的支撑。前端模块化自动打包工具。多个模块化的互相依赖的js文件打包成一个js，html使用打包后的js文件就行了，一般只有一个js入口，在里面引入其他也要打包的资源文件。
npm node包管理工具
npm run build 打包,配置了.json可以用本地webpack版本打包
webpack一般都是用项目本地的，全局的不适用。又分为开发时依赖和运行时依赖
基本webpack可以打包js文件，如果还有css等文件打包 要配置loader来支持
安装
1.mac使用。先安装nvm，然后用nvm安装了node(npm也装了)，然后打开webstrom，就可以使用
2.npm init 创建一些默认的node 环境
3.创建好项目。cd进入，然后npm install webpack --save-dev(--save-dev开发时依赖，打包不需要)（node是全局的就可以）
4.手动创建webpack.config.js 然后配置入口和出口等等。
const path = require('path');
module.exports = {
entry:"./src/main.js",
output:{
path:path.resolve(__dirname,'./dist'), //要写绝对路径
filename:"bundle.js"
}
}
5.npm run xx的命令映射
package.json 一般要增加
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
这个地方设置了webpack，就会先去找项目本地的webpack版本调用。如果没有再去找全局的webpack，（尽量不要安装全局的），然后通过webpack.config.js找到入口和出口文件。然后执行打包命令。如果不设置这个可以使用npx webpack 入口路径js --output(--o) 出口路径js。这个webpack路径在node_modules/bin/里面
6.增加rules依赖的时候路径要设置正确
7.webpack配置vue
npm install vue --save 打包和生产都需要
npm run build报错。或者可以跑起来但是vue没挂载上内容。因为默认加载的vue版本不对。解决方案有俩。
1.import Vue from "vue/dist/vue"
2.config增加配置。
resolve:{
alias:{
'vue$':"vue/dist/vue.esm.js"
}
}
如果使用了template会报错，因为：
1.runtime-only->代码中不能有template
2.runtime-compiler->代码中可以有template，可以编译
解决方法：
加载vue的loader：
npm install vue-loader vue-template-compiler --save-dev。
然后配置webpackconfig
module: {
rules: [
{
test:/\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test:/\.vue$/,
use: ['vue-loader'],
},
],
}
都可以让webpack加载可以编译template的vue版本。
此时build还会报错，因为少一个plugins的问题。可以去.json里面把vue-loader版本设置低一点，也可以在config里面添加
const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
vue 定义template的时候一定要定义div作为根，不然只显示第一个
然后vue就跑起来了。
最后补充一句。挂载子组件一定要 template:'<cpn></cpn>',
装好node之后，可以使用
npm install -g @vue/cli 安装脚手架，全局安装就可以了
