//webpack 模块化打包工具 支持 common.js es amd
事先准备
//npm install webpack webpack-cli -g //全局安装
// npm configsetregistry https://registry.npm.taobao.org //淘宝镜像
1.npm init -y //初始化项目
2.npm install jquery -S //安装jquery (S整个项目都用)
3.创建src目录 穿件main.js文件 index.html文件,在index.html里面引入main
4.webpack src/main.js -o dist/bundle.js 将bundle.js引入index.html //创建dist目录 打包bundle.js
5.点开package.json 在scripts下面加上"start":"webpack src/main.js -o dist/bundle.js"
//输入npm run start 就可以运行了(有些命名必须用 run)
6.npm install webpack webpack-cli -D //安装本地项目依赖
7.创建webpack.config.js(固定名字) //放在根目录里 可以把index的bundle删掉了
8.npm i webpack-dev-server -D //自动打开 修改浏览器
package.json文件
"start":"webpack --port 8810 --hot --open"
//port 端口 hot 自动更行 open自动打开浏览器
//此时打包的信息全部都是缓存 所以是看不到的
9.npm i html-webpack-plugin -D //结合index.html与dunble.js
10.npm i css-loader -D //将css打包成模块
npm i style-loader -D //将style模块显示到浏览器中
11.npm i less -D //编译less
npm i less-loader -D //把less打包成模块
{test:/\.less$/,use: ['style-loader','css-loader','less-loader']},
//在css的基础上加上个less-loader
12.npm i url-loader -D //把图片打包成模块
npm i file-loader -D //图片超过1024自动使用外链式图片
//options 选择 limit限度
13.npm i
babel-core //兼容低版本
babel-loader@7.1.5 //打包成模块 (很慢 所以要下面3个分担变快)
babel-plugin-transform-runtime //减小项目的大小
babel-preset-env //转换语法
babel-preset-stage-0 //可以使用所有的babel编译
-D
创建.babelrc文件(固定名字)
vue与webpack结合 webpack-cli
//事先准备
npm i vue -g //vue全局安装
1.在项目里输入
npm i vue -S //下载生产环境下的vue
npm i
vue-loader //装载vue
vue-template-compiler //vue模板解析器(vue有自己的一套模板语法)
vue-style-loader //装载vue里面的style样式(test里面的style-loader要改为vue-style-loader)
-D
2.// webpack.config.js
3.创建vue文件 (vue loader上面有代码复制)
4.在html里面写上#app
//main.js
var vm =new Vue(Myheaer).$mount('#app')
//写完new Vue 按alt+enter
import Vue from "vue";
会出来(Vue隔壁多余的东西全部删掉)
全部写完
import MyHeader from "./MyHeader.vue";
会出来
5.嵌套
//剩下的东西自动生成 要重新打开页面
cmdnpm install -g @vue/cli //下载cli
