webpack 安装使用（）-原创手记-慕课网

关于webpack的介绍，这个教程写的很清楚，http://webpackdoc.com/install.html

我想学习vuejs，用vuejs+webpack构建一个notes app，所以创建了一个空文件夹，命名为 vuex-notes-app

前提：安装了node
1.首先全局安装webpack : npm install webpack -g
2.初始化项目： cd 到vuex-notes-app，执行npm init -y。
参数 y 的意思是接收npm的默认值。然后看到文件夹下出现了 package.json文件
3.局部安装webpack :
npm install webpack --save-dev
参数 --save-dev 意思是开发时依赖webpack

至于为什么webpack要全局安装也要局部安装 ： 
全局安装之后，才可以使用webpack命令。
局部安装，为了保存到package.json文件中。

npm install webpack-dev-server --save-dev 安装 dev tools 到 package.json 文件中，本地运行webpack服务。
4.依据项目所需安装依赖，我这里安装了：
开发依赖：vue-loader ， babel-loader， babel-core， babel-preset-es2015等；
npm install babel-core --save-dev
项目依赖：　vue, vuex。
npm install vue vuex --save
5.配置webpack ：
在根目录下创建 webpack.config.js

//webpack.config.js

module.exports = {
    entry : './main.js',
    output : {
        path : __dirname,
        filename : 'build.js'
    },
    module : {
        loaders : [
            {
                test : /\.js$/,
                loader : 'babel-loader',
                exclude : /node_modules/,
                query : {
                  presets :['es2015'],
                  plugins : ['transform-runtime']                    
                }
            },
            {
                test : /\.vue$/,
                loader : 'vue-loader'
            }
        ]
    }
}

配置文件说明了：

main.js是入口文件，打包后输出build.js文件。
案例中指定了两个loader : babel-loader （将es6转换成es5）和 vue-loader（处理.vue文件）。loader 的作用是将其他类型的文件转换成js文件,因为webpack只能处理js文件。
babel 指出我们要用es2015的语法进行开发。
6.添加软件生命周期事件和命令。

//package.json
"scripts": {
  "dev": "webpack-dev-server --inline --hot",
  "build": "webpack -p"
}

将package.json文件修改成上面的样子，我们就可以用：
npm run dev 运行dev server
npm run build 来打包和压缩代码。