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