webpack與vue的使用

一、建好文件目錄

二、npm init 初始化項目

生成package.json
還可以使用 npm init -y 其中-y 是yes的意思，在init時省去了敲回車的步驟
注意：npm i 是安裝包的命令，會根據你的命令行後綴是否加了 -g或者global判斷，下載的包是放在全局的環境，還是當前package.json文件對應的node_module文件夾目錄下

npm、cnpm的使用，與相關知識

三、安裝 webpack 和 webpack-cli

1. 運行npm i webpack -g npm i webpack-cli -g全局安裝webpack，這樣就能在全局使用webpack的命令，但一般不推薦使用全局安裝
2. 在項目根目錄中運行npm i webpack --save-dev npm i webpack-cli --save-dev安裝到項目依賴中（即局部安裝），會生成 node_modules 文件夾，當在本地安裝 webpack 後，能夠從 node_modules/.bin/webpack 訪問它的 bin 版本。
3. 使用npx命令代替npm執行webpack的打包動作，或使用 node_modules/.bin/webpack命令構建

在webpack 3中，webpack本身和它的CLI以前都是在同一個包中，但在第4版中，他們已經將兩者分開來更好地管理它們。
這就意味着如果你webpack和webpack-cli是局部安裝的，想要使用webpack命令必須進入node_modules/.bin/webpack才能執行webpack命令，.bin目錄包含的是一系列可以執行的命令，但是如果你是全局安裝的webpack-cli，就不需要進入bin目錄，webpack就能夠尋找到它的命令路徑了

由於版本變動，webpack和webpack-cli的安裝有些不一樣，還需再探討
https://segmentfault.com/a/1190000013699050?utm_source=tag-newest
如何正確徹底刪除與安裝webpack 全局或是局部？
注意：在全局安裝webpack後，最好在項目中也安裝webpack

npm install module_name -S 即 npm install module_name --save 寫入dependencies
npm install module_name -D 即 npm install module_name --save-dev 寫入devDependencies
npm install module_name -g 全局安裝(命令行使用)
npm install module_name 本地安裝(將安裝包放在 ./node_modules 下)
npm install -S -D -g 有什麼區別

四、新建webpack配置文件 webpack.config.js

在第三步直接執行webpack命令，會報一些錯誤，因此需要先配置一下執行webpack命令的配置文件

   // 導入處理路徑的模塊（node中處理路徑的模塊）
    var path = require('path');

    // 導出一個配置對象，將來webpack在啓動的時候，會默認來查找webpack.config.js，
    // 並讀取這個文件中導出的配置對象，來進行打包處理
    module.exports = {
    	mode: 'production',	 			// [webpack執行模式](https://www.cnblogs.com/leinov/p/10039173.html)
        entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
        output: { // 配置輸出選項
            path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
            filename: 'bundle.js' // 配置輸出的文件名
        }
    }

在項目中
此時執行webpack命令，就會生成出口文件bundle.js

五、安裝webpack-dev-server 實現實時打包構建

1. 執行npm i webpack-dev-server -D 局部安裝
2. 在package.json中配置"script"節點，使在命令行中執行 npm run dev 時可以自動調用局部安裝的webpack-dev-server
   注意：運行webpack-dev-server時，局部必須已安裝好webpack，這也是爲什麼建議局部安裝webpack的原因之一。

六、安裝html-webpack-plugin插件配置啓動頁面

1. 運行cnpm i html-webpack-plugin --save-dev安裝到開發依賴
2. 修改webpack.config.js配置文件如下：

    // 導入處理路徑的模塊
    var path = require('path');
    // 導入自動生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
        output: { // 配置輸出選項
            path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
            filename: 'bundle.js' // 配置輸出的文件名
        },
        plugins: [ // 添加plugins節點配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路徑
                filename:'index.html'//自動生成的HTML文件的名稱
            })
        ]
    }

注意：只有plugins是複數，且其是中括號[]
3. 將index.html中script標籤註釋掉，因爲html-webpack-plugin插件會自動把bundle.js注入到index.html頁面中！
4. 實現自動打開瀏覽器、熱更新和配置瀏覽器的默認端口號，修改package.json的script節點如下，其中--open表示自動打開瀏覽器，--port 4321表示打開的端口號爲4321，--hot表示啓用瀏覽器熱更新：

"dev": "webpack-dev-server --hot --port 4321 --open"

七、下載loader實現webpack打包各種類型的文件

1. 下載各類loader

npm i style-loader css-loader --save-dev			//css
npm i less-loader less -D
npm i sass-loader node-sass --save-dev
npm i url-loader file-loader --save-dev				//css中的路徑
npm i 		//babel處理高級語法loader包

bael升級到7.x的用法
2. 修改webpack.config.js配置文件

module: { // 用來配置第三方loader模塊的
        rules: [ // 文件的匹配規則
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },   //處理css文件的規則
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            { test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },			
            // `limit`指定進行base64編碼的圖片大小；只有小於指定字節（byte）的圖片纔會進行base64編碼
             { test: /\.(png|jpg|gif|ttf|svg)$/, use: 'file-loader' },
             // 解析文字、圖片格式
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
        ]
    }

注意：use表示使用哪些模塊來處理test所匹配到的文件；use中相關loader模塊的調用順序是從後向前調用的；
3. 在項目根目錄中添加.babelrc文件，並修改這個配置文件如下：

八、vue的安裝與配置

1. 運行cnpm i vue -S將vue安裝爲運行依賴；
2. 運行cnpm i vue-loader vue-template-compiler -D將解析轉換vue的包安裝爲開發依賴；
3. 在webpack.config.js中，添加如下module規則：

module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  }

4. 創建App.vue組件頁面：

    <template>
      <!--注意：在 .vue 的組件中，template 中必須有且只有唯一的根元素進行包裹，一般都用 div 當作唯一的根元素 -->
      <div>
        <h1>這是APP組件 - {{msg}}</h1>
        <h3>我是h3</h3>
      </div>
    </template>

    <script>
    // 注意：在 .vue 的組件中，通過 script 標籤來定義組件的行爲
    // 需要使用 ES6 中提供的 export default 方式，導出一個vue實例對象
    export default {
      data() {
        return {
          msg: 'OK'
        }
      }
    }

    </script>

	<!-- 通過scoped屬性，將CSS的改變確定到這個組件上--!>
    <style scoped>
    h1 {
      color: red;
    }
    </style>

5. 創建main.js入口文件：

    // 導入 Vue 組件
    import Vue from 'vue'

    // 導入 App組件
    import App from './components/App.vue'

    // 創建一個 Vue 實例，使用 render 函數，渲染指定的組件
    var vm = new Vue({
      el: '#app',
      render: c => c(App)
    });

6. 安裝插件 npm i vue-loader-plugin -S
7. 在配置文件webpack.config.js中添加

const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
	plugins: [
		new VueLoaderPlugin()
	]
}

8. 在使用webpack構建的Vue項目中使用模板對象

在webpack.config.js中添加resolve屬性：

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

vue路徑優化之resolve的使用
9. 安裝配置vue-router路由模塊npm i vue-router
在要使用路由的文件中添加

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

九、遇到的問題

1. 文件太大，重新配置
2. 安裝chrome插件vue-devtools時，沒有vue控制檯，修改webpack配置文件即可

mode: 'devlopment‘,