天天看點

vue系列8:webpack

1、什麼是webpack

webpack 是前端的一個項目建構工具,它是基于 Node.js 開發出來的一個前端工具;

http://webpack.github.io/

vue系列8:webpack

2、安裝

1)全局安裝 npm i webpack -g

2)項目根目錄安裝到項目依賴中 npm i webpack --save-dev

3、使用

vue系列8:webpack

1)npm init -y

2)npm install jquery -S

3)webpack .\src\main.js .\dist\bundle.js

npm i webpack-dev-server -D 把這個工具安裝到項目的本地開發依賴

npm i html-webpack-plugin -D

npm i style-loader css-loader -D

npm i less -D

npm i less-loader -D

npm i sass -D

npm i sass-loader -D

npm i node-sass -D

9)npm i babel-core babel-loader babel-plugin-transform-runtime -D

npm i babel-preset-env babel-preset-stage-0 -D

4、代碼

package.json

npm run dev

"dev": "webpack-dev-server"

webpack-dev-server:實時監聽代碼改變,自動打包編譯,并且自動重新整理浏覽器。

上面有了'style-loader', 'css-loader', 'less-loader', 'sass-loader'

vue系列8:webpack

加了這兩個樣式,報錯:缺少loader

npm i url-loader -D

npm i file-loader -D

vue系列8:webpack

小圖檔轉base64編碼,大圖檔不轉

vue系列8:webpack

babel

使用vue的執行個體的render方法渲染元件

老的方式

新的方式

webpack中導入vue與普通網頁中使用script标簽

vue