1、什麼是webpack
webpack 是前端的一個項目建構工具,它是基于 Node.js 開發出來的一個前端工具;
http://webpack.github.io/
2、安裝
1)全局安裝 npm i webpack -g
2)項目根目錄安裝到項目依賴中 npm i webpack --save-dev
3、使用
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'
加了這兩個樣式,報錯:缺少loader
npm i url-loader -D
npm i file-loader -D
小圖檔轉base64編碼,大圖檔不轉
babel
使用vue的執行個體的render方法渲染元件
老的方式
新的方式
webpack中導入vue與普通網頁中使用script标簽