webpack打包vue

一、原理

webpack 背后的原理其實就是把所有的非 js 資源都轉換成 js (如把一個 css 文件轉換成“創建一個 style 標簽並把它插入 document ”的腳本、把圖片轉換成一個圖片地址的 js 變量或 base64 編碼等)，然后用 CommonJS 的機制管理起來。

用途是通過 CommonJS 的語法把所有瀏覽器端需要發布的靜態資源做相應的准備，比如資源的合並和打包。

同時 webpack 提供了強大的 loader 機制和 plugin 機制，loader 機制支持載入各種各樣的靜態資源，不只是 js 腳本、連 html, css, images 等各種資源都有相應的 loader 來做依賴管理和打包；而 plugin 則可以對整個 webpack 的流程進行一定的控制

二、常用命令及安裝

npm install -g webpack
npm install -g webpack-dev-server
npm install
npm info webpack //查看webpack 版本信息

webpack --display-modules --display-chunks --config webpack.config.js //重新生成打包js
webpack --watch   //監聽變動並自動打包
webpack --display-error-details //顯示異常信息
webpack -p    //壓縮混淆腳本，這個非常非常重要！
webpack -d    //生成map映射文件，告知哪些模塊被最終打包到哪里了

首先要安裝 Node.js， Node.js 自帶了軟件包管理器 npm
用npm 安裝webpack

通常我們會將webpack安裝到項目依賴，這樣就可以使用本地版本的webpack

如果要使用webpack開發工具，要單獨安裝 webpack-dev-server

三、打包

1.生成之后的package.json

{
  "name": "webapp",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.23.1",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue": "^1.0.26",
    "vue-hot-reload-api": "^1.3.2",
    "vue-html-loader": "^1.2.2",
    "vue-loader": "^8.5.2",
    "vue-router": "^0.7.13",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.1",
    "webpack-merge": "^0.13.0"
  },
  "devDependencies": {
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.13.0",
    "weixin-js-sdk": "^1.0.7"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2.配置webpack.config.js

var path = require('path');
module.exports = {
    entry: './src/main.js',
    output: {
        path: './dist',
        publicPath: 'dist/',
        filename: 'build.js'
    },
    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime']
    },
    //配置自動刷新,如果打開會使瀏覽器刷新而不是熱替換
    /*devServer: {
      historyApiFallback: true,
      hot: false,
      inline: true,
      grogress: true
    },*/
    module: {
        loaders: [
          //轉化ES6語法
          {
              test: /\.js$/,
              loader: 'babel',
              exclude: /node_modules/
          },
          //解析.vue文件
          {
              test: /\.vue$/,
              loader: 'vue'
          },
          //圖片轉化，小於8K自動轉化為base64的編碼
          {
              test: /\.(png|jpg|gif)$/,
              loader: 'url-loader?limit=8192'
          }
        ]
    },
    vue: {
        loaders: {
            js: 'babel'
        }
    },
    resolve: {
        // require時省略的擴展名，如：require('app') 不需要app.js
        extensions: ['', '.js', '.vue'],
        // 別名，可以直接使用別名來代表設定的路徑以及其他
        alias: {
            filter: path.join(__dirname, './src/filters'),
            components: path.join(__dirname, './src/components')
        }
    }
} 

四、編譯調試

　　上圖為編譯之后的效果

　　調試用命令

webpack --display-modules --display-chunks --config webpack.config.js