1. 全局安裝 nrm: npm install nrm -g

   2. 查看鏡像源 nrm ls
   3. 切換淘寶鏡像源 nrm use taobao
   4. 全局安裝webpack npm install webpack@1.14.0 -g
      2.4. webpack 進行代碼打包

   導出一個模塊 module.exports = 需要導出的對象

   導入一個模塊 var 模塊名 = require(文件路徑)

   webpack 打包命令
   webpack 需要打包的文件名 輸出的文件名

   例如:
   webpack main.js build.js
   2.5. webpack 配置文件

   1. 默認配置文件名稱webpack.config.js

   module.exports = {
   entry:'需要打包的文件' // 路徑+文件名 一般為 ./src/xxx.js
   output:{
   path:'輸出文件的路徑' // 絕對路徑 使用__dirname + 路徑
   filename:*輸出文件的名稱* // 一般都為build.js/bundle.js
   }
   }

   2. 使用webpack進行打包
      - 如果是默認配置文件 則直接在命令行中 輸入 webpack
      - 如果是其他改過名字的配置文件 則使用 webpack --config 配置文件名
      2.6. webpack loader的使用

loader：預處理器。在js代碼執(zhí)行之前需要執(zhí)行的一些處理。
2.6.1. css-loader

css-loader 是進行css解析，能夠使瀏覽器正常識別js文件中導入的 css 文件
1. 初始化package.json
npm init

2. 安裝css-loader以及style-loader
npm install style-loader css-loader --save-dev

3. 在webpack.config.js文件中進行配置

        module:{
                loaders:[
                        {
                                test: /\.css$/,
                                loader:'style-loader!css-loader'
                        }
                ]
        }

2.6.2. sass-loader 的使用

sass-loader是進行scss文件的解析
1. 安裝sass-loader
npm install node-sass sass-loader style-loader css-loader --save-dev

2.配置sass-loader
 loaders:[
                {
                        test: /\.scss$/,
                        loader:'style-loader!css-loader!sass-loader'
                } 
        ]

2.6.3. less-loader 的使用

less-loader是進行l(wèi)ess文件的解析
1. 安裝scss-loader
npm install less less-loader style-loader css-loader --save-dev

2.配置scss-loader
 loaders:[
                {
                        test: /\.less$/,
                        loader:'style-loader!css-loader!less-loader'
                }
        ]

2.6.4. url-loader 的使用

url-loader是進行url資源的解析
1. 安裝url-loader
npm install file-loader url-loader --save-dev

2.配置url-loader
 loaders:[
                {
                        test: /\.(png|jpg|gif|ttf)$/,
                        loader:'url-loader!limit=20000&name=images/[hash:8].[name].[ext]'
                        // limit單位是字節(jié) 1kb = 1024b(字節(jié))
                        // 對于比較小的圖片資源可以使用limit進行限制 
                        // 小于limit值轉(zhuǎn)換成base64字符串內(nèi)嵌到j(luò)s代碼中
                        // 大于limit值的圖片才轉(zhuǎn)成URL進行網(wǎng)絡(luò)請求
                }
        ]

2.6.5. webpac-dev-server的使用

1. 安裝webpack-dev-server

npm install webpack@1.14.0 webpack-dev-server@1.16.0 --save-dev

2. 安裝自動生成HTML文件的插件
npm install html-webpack-plugin@2.28.0 --save-dev

3. 修改package.json文件

        "scripts": {
                "dev": "webpack-dev-server --hot --inline --open --port 5008"
        },

4. 配置webpack.config.js中的內(nèi)容

- 引入html-webpack-plugin
        `var htmlWP = require('html-webpack-plugin');`
- 在modul.exports中加入
         plugins:[
                new htmlWP({
                        title: '首頁',  //生成的頁面標題
                        filename: 'index.html', //webpack-dev-server在內(nèi)存中生成的文件名稱，自動將build注入到這個頁面底部，才能實現(xiàn)自動刷新功能
                        template: 'template.html' //根據(jù)template.html這個模板來生成(這個文件程序員自己書寫)
                })
        ]

5. 運行 npm run dev

2.6.6. babel-loader的使用

babel-loader是用來將es6語法轉(zhuǎn)換成es5語法
1. 安裝babel-loader
npm install babel-core@6.24.0 babel-loader@6.4.1 babel-preset-es2015@6.24.0 babel-plugin-transform-runtime@6.23.0 --save-dev

2. 配置webpack.config.js文件

{
        test: /\.js$/,  // 將.js文件中的es6語法轉(zhuǎn)成es5語法
        loader:'babel-loader',
        exclude:/node_modules/ // 排除node_modules文件夾下的js文件不用被轉(zhuǎn)換
}

3. 配置babel的轉(zhuǎn)碼規(guī)則

babel:{
        presets:['es2015'],  // 配置將es6語法轉(zhuǎn)換成es5語法
        plugins:['transform-runtime'] // 用來解析vue文件
}

2.7. webpack解析vue文件

2.7.1. 安裝vue-loader解析.vue文件

1. 安裝相關(guān)包
`npm install vue vue-loader@11.3.4 vue-template-compiler babel-plugin-transform-runtime@6.23.0 --save-dev`

2. 配置webpack.config.js文件
{
        test: /.vue$/,  // 解析 .vue 組件頁面文件
        loader:'vue-loader' 
}

2.7.2. .vue文件基本代碼結(jié)構(gòu)

一個.vue文件就是一個vue的組件
// 1. 組件模板
<template>
<div>

<span v-text="msg" class="red"></span>
</div>
</template>

// 2. 負責導出vue的對象
<script>
        // 負責導出 .vue這個組件對象(它本質(zhì)上是一個Vue對象,所以Vue中該定義的元素都可以使用)
        export default{  // es6的導出對象的寫法
                data(){  //等價于 es5的 data:function(){
                        return {
                                msg :'hello vuejs'
                        }
                },
                methods:{

                },
                created(){

                }
        }
</script>

// 3. 書寫組件內(nèi)部的樣式
<style scoped>
// scoped表示這個里面寫的css代碼只是在當前組件頁面上有效，不會去影響到其 他組件頁面
        .red{
                color: red;
        }
</style>

2.7.3. 項目入口文件main.js中渲染組件

// 1.0 導入vue核心包
// 凡是使用npm安裝的包 引入的時候都不需要寫相對路徑 只需要寫包名即可
import Vue from 'vue';

// 2.0 導入App.vue的vue對象
import App from './App.vue';

// 3.0 利用Vue對象進行解析渲染
new Vue({
        el:'#app',
        render:function(create){return create(App)} //es5的寫法
        // render:c=>c(App)  // es6的函數(shù)寫法 =>：goes to
});

2.8. 使用webpack以及npm創(chuàng)建項目

1. 創(chuàng)建項目文件夾

2. 創(chuàng)建npm的配置文件package.json

npm init -y

3. 創(chuàng)建webpack配置文件(webpack.config.js)

4. 根據(jù)項目需求安裝所需要使用的模塊

npm install 包名 --save-dev