webpack安裝與配置

1.webpack是基於node環境的，因此在安裝webpack以前要先安裝node.js

 

 2.有了node環境，安裝webpack3.6.0（版本隨心情）

 

 3.建立src（存放源代碼）和dist（用於存放打包以後的）文件夾（寫文件main.js和mathUtils.js）

 

 4.使用webapack將main.js打包到dist/bundles.js下（webpack ./src/main.js ./dist/bundle.js）

雖然只使用了main.js,可是與其餘關聯的也會一塊兒打包（main.js爲入口）

5.接下來在index.heml，中引入dist/bundle.js(這樣打包以後就引入一個就ok,以前的話是有幾個js文件引入幾個，如今就很方便啦~)，

npm init,會自動生成package.json文件

 

 

 

 6.接下來，運行index.heml,就能夠啦~（能夠在編輯器，也能夠在瀏覽器）

 

 7.接下來寫一個info.js文件，寫完以後從新打包一下（webpack ./src/main.js ./dist/bundle.js）

 

 

 

 

 

 8.由於每次打包都須要（webpack ./src/main.js ./dist/bundle.js），因此建立一個webpack.config.js文件來配置出入口等

 

 注意，在配置出口的時候要使用絕對路徑！！！不然會報錯

先npm init,初始化（生成package.json）若是package.json依賴其餘文件時，npm install;

 

 配置好以後，每次打包，只須要輸入：webpack就ok辣~

 

 若是不適用webpack（這個詞）來打包的話，能夠在package中配置

 

ps:在配置文件中配置以後，默認是在本地執行webpack,若是直接在終端（或CMD）執行webpack,就是在全局中（全局和本地的webpack版本可能不一樣）

 9.安裝本地webpack（npm install webpack@3.6.0 --save-dev），這時package.json中就會顯示 webpack版本（開發時依賴版本）

 

 

 10，接下來如何配置css文件(寫一個css文件,mian.js依賴一下這個css文件)

webpack主要處理打包時的JS文件，而loader會幫助咱們處理css文件(不一樣的文件處理安裝不一樣的loader)

 

 

 

 

經過npm安裝須要使用的loader（npm install --save-dev css-loader 和npm install --save-dev style-loader）

css-loader只負責將css文件進行加載      style-loader負責將樣式添加到DOM中

 

 

 接下來在webpack.config.js中配置一下（loader的執行順序是從右向左的）

 

 

 

配置好c's's以後，npm run build從新打包，運行index.html

 

 

11.webpack配置less(首先有一個less文件)

 

 

 接着在入口中引入less文件

 

 

 

 安裝less 須要的loader（npm install --save-dev less-loader less）

 

 

 

 

 

 接下來配置webpack.config.js

 

 

從新打包以後，運行就ok~! 

 

 12.webpack圖片文件的處理

 

 安裝url loader(npm install --save-dev url-loader)

 

 webpack.config.js中配置一下

 

接下來，就能夠看到圖片了

 

 

  // 當加載的圖片小於limit時，會直接將圖片編譯成base64字符串形式

              // 當加載的圖片大於limit時，會使用file-loader，因此須要安裝file-loader

  npm install file-loader --save-dev

 

 從新打包，運行文件

注意。配置一下webpack.config.js文件中的publicPath(編譯之後的文件都在dist/文件夾下)

 

對打包後的圖片從新命名

 

 

 

13.將ES6轉爲ES5(使用babel loader)

安裝babel loader( npm install --save-dev babel-loader@7 babel-core babel-preset-es2015)

 

 接下來在webpack.config.js中配置

 

從新打包以後，能夠看到bundle.js中的const都變爲了var

 14webpack配置vue

先將vue安裝到node_module文件夾下

npm install vue --save

 

在webpack.config.js中配置，指定導入的vue的版本，包含（compiler）,若是不設置的話默認調用runtime

 15

建立vue時template和el的關係

index.html頁面只放一個div,之後修改也不去頻繁的改動index.html文件

 

 全部的元素都放在main.js的template中（vue內部會將template中的內容替換到主頁的div）

 

 

 

16配置vue

下載vue 的loader（npm install vue-loader vue-template-compiler --save-dev）

 

 webpack.config.js中配置

 

 再去安裝plugin插件（vue-loader版本14以上須要安裝plugin插件）

也能夠在package.json中直接更改vue-loader的版本（更改後從新安裝 npm install,根據咱們更改的版本從新安裝）

 

 若是想在組件中註冊其餘組件：能夠這樣作

子組件

 

 父組件中註冊引用

 

 還得導入~

 

 配置省略後綴名

 

 

17 plugin橫幅（BannerPlugin是webpack自帶的插件）

先引入webpack

 

 在建立

 

 從新打包後，最後就會在bunder.JS文件中添加「最終版權歸馮亞婷全部」

18 htmlWebpackPlugin插件（能夠自動生成一個index.html文件，能夠指定模板來生成；將打包的js文件自動經過script標籤插入到body中）

安裝插件（npm install html-webpack-plugin --save-dev）

修改webpack.config.js中的配置

 

 注意在使用時，自動生成的script標籤路徑的修改（由於以前配置了全部url前面都加「dist/」）,如今把配置去掉

 

 設置生成時借鑑模板（模板中只有一個div#app就好了，不用在手動導入js,插件自動導入）

 

 

19，對bundle.js進行壓縮的插件uglifyjs(npm install uglifyjs-webpack-plugin@1.1.1 --save-dev)指定版本1.1.1與CL2配合

安裝

 

 webpack.config.js中配置

 

 

 

 從新打包以後，就會看到bundle.js已經被壓縮了