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