webpack打包vue

1、原理

webpack 背後的原理其實就是把全部的非 js 資源都轉換成 js (如把一個 css 文件轉換成「建立一個 style 標籤並把它插入 document 」的腳本、把圖片轉換成一個圖片地址的 js 變量或 base64 編碼等)，而後用 CommonJS 的機制管理起來。

用途是經過 CommonJS 的語法把全部瀏覽器端須要發佈的靜態資源作相應的準備，好比資源的合併和打包。

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

2、經常使用命令及安裝

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

3、打包

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"
}

View Code

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')
        }
    }
} 

4、編譯調試

　　上圖爲編譯以後的效果

　　調試用命令

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