//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.創(chuàng)建src目錄?穿件main.js文件?index.html文件,在index.html里面引入main
4.webpack src/main.js -o dist/bundle.js ??將bundle.js引入index.html?//創(chuàng)建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.創(chuàng)建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
創(chuàng)建.babelrc文件(固定名字)
vue與webpack結合? webpack-cli
//事先準備
npm?i?vue -g //vue全局安裝
1.在項目里輸入
npm?i?vue?-S? //下載生產環(huán)境下的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.創(chuàng)建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
