Nodejs與包管理工具安裝：

Windows安裝：

https://nodejs.org/en/

下載安裝包安裝就可以。

Ubuntu安裝：

//安裝nodejs
sudo apt-get install nodejs
//安裝包管理工具
sudo apt-get install npm

安裝結果確認：

~/dev/devtest$ node --version
v8.11.1
~/dev/devtest$ npm --version
5.8.0

快捷通道（Vue-cli方法）：

    //設置npm倉庫鏡像為國內淘寶鏡像
    npm config set registry https://
 
registry.npm.taobao.org
    //查看配置是否成功
    npm config get registryf
    //全局安裝 webpack
    npm install -g webpack
    //全局安裝 vue-cli
    npm install -g vue-cli
    //創建一個基於webpack模板的項目
    vue init webpack my-project
    
    cd my-project
    npm install
    //這一步看著簡單，實際上都在配置文件裏面配好了，可以去研究一下
    npm run dev

自動生成的目錄結構：

手動設置：

~/dev/my-project$ npm init -y
Wrote to /home/ubuntu/dev/my-project/package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords"
 
: [],
  "author": "",
  "license": "ISC"
}

//Webpack
~/dev/my-project$ npm i webpack webpack-dev-server --save-dev
//Vue
~/dev/my-project$ npm i vue --save
//Loader
~/dev/my-project$ npm i vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api file-loader cross-env --save-dev
// 自動將依賴寫入html文件
~/dev/my-project$ npm install html-webpack-plugin --save-dev


//新建build目錄
~/dev/my-project$ mkdir -m 777 build
~/dev/my-project$ cd build

//新建webpack.config.js文件

webpack.config.js

//修改webpack.config.js
var path = require(‘path‘);
var webpack = require(‘webpack‘);

module.exports = {
    entry: ‘./src/main.js‘, // 項目的入口文件，webpack會從main.js開始，把所有依賴的js都加載打包
    output: {
        path: path.resolve(__dirname, ‘./dist‘), // 項目的打包文件路徑
        publicPath: ‘/dist/‘, // 通過devServer訪問路徑
        filename: ‘build.js‘ // 打包後的文件名
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    }
};

//修改package.josn
//webpack-dev-server會自動啟動一個靜態資源web服務器 --hot參數表示啟動熱更新
"scripts": {
    "dev": "webpack-dev-server --open --hot",
    "build": "webpack --progress --hide-modules"
  },

//運行
//瀏覽器自動打開的一個頁面，隨意修改js，瀏覽器會自動刷新
npm run dev

//編譯
npm run build

引入Vue：

//webpack默認不支持轉碼es6，但是import export這兩個語法卻單獨支持
//webpack默認只支持js的模塊化，如果需要把其他文件也當成模塊引入，就需要相對應的loader解析器//webpack.config.js
var path = require(‘path‘);
var webpack = require(‘webpack‘);

module.exports = {
    entry: ‘./src/main.js‘,
    output: {
        path: path.resolve(__dirname, ‘./dist‘),
        publicPath: ‘/dist/‘,
        filename: ‘build.js‘
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    },
    resolve: {
        alias: {
            ‘vue$‘: ‘vue/dist/vue.esm.js‘
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    ‘vue-style-loader‘,
                    ‘css-loader‘
                ],
            }
        ]
    }
};

//匹配後綴名為css的文件,然後分別用css-loader，vue-style-loader去解析 解析器的執行順序是從下往上(先css-loader再vue-style-loader)
//我們這裏用vue開發，所以使用vue-style-loader，其他情況使用style-loader

打包發布：

// 對文件進行壓縮，緩存，分離等等優化處理//修改package.json
"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}

//修改webpack.config.js，判斷NODE_ENV為production時，壓縮js代碼
var path = require(‘path‘);
var webpack = require(‘webpack‘);

module.exports = {
    // 省略...
}

if (process.env.NODE_ENV === ‘production‘) {
    module.exports.devtool = ‘#source-map‘;
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        ‘process.env‘: {
          NODE_ENV: ‘"production"‘
        }
      }),
      new webpack.optimize.UglifyJsPlugin(),
    ])
  }
  

module: {
        //加載器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 來處理
            { test: /\.css$/, loader: ‘style-loader!css-loader‘ },
            //.js 文件使用 jsx-loader 來編譯處理
            { test: /\.js$/, loader: ‘jsx-loader?harmony‘ },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理
            { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},
            //圖片文件使用 url-loader 來處理，小於8kb的直接轉為base64
            { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘}
        ]
    }

Vue開發環境搭建