手动搭建webpack#1.0

项目代码: https://github.com/yanghanbin-sz/webpack-demo

初始化package.json文件

npm init --yes

安装webpack webpack-dev-server

cnpm install webpack webpack-dev-server --save-dev

配置webpack-dev-server快捷命令

//package.json
{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "main.js",
    "scripts": {
        "dev": "webpack-dev-server --inline --open --hot --port 8082"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "vue-loader": "^8.5.4",
        "webpack": "^2.5.1",
        "webpack-dev-server": "^2.4.5"
    }
}

配置loader

cnpm install vue-loader@8.5.4 vue-html-loader css-loader vue-style-loader vue-hot-reload-api@1.3.2 --save-dev

配置babel

cnpm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev

加载核心vue文件

cnpm install vue@1.0.28 --save

配置webpack.config.js

module.exports = {
    entry: './main.js',
    output: {
        path: __dirname,
        filename: 'build.js'
    },

    module: {
        loaders: [{
            test: /\.vue$/,
            loader: 'vue'
        }, {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015'] //版本
            }
            // loader: 'babel?presets=es2015' //以上2种方式选一种
        }]
    },

    babel: {
        presets: ['es2015'], // 配置解析版本
        plugins: ['transform-runtime']
    },

    vue: {
        loaders: {
            js: 'babel?presets=es2015' //配置解析版本
        }
    }
}

PS: 各个webapck版本配置不一样,比如我当前用到版本bael: {xxxx} 这段presets:['es2015'] 没有生效,所以需要在babel中加入?presets=es2015参数

npm run dev

结果显示如下

结合 vue-router

cnpm install vue-router@0.7.13 --save

产品上线

执行webpack -p 打包,压缩,也可以配置在package.json中,执行npm run build

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --port 8082",
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "css-loader": "^0.28.1",
    "vue-hot-reload-api": "^1.3.2",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^8.5.4",
    "vue-style-loader": "^3.0.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.5"
  },
  "dependencies": {
    "vue": "^1.0.28",
    "vue-router": "^0.7.13"
  }
}