11月目标总结

前一阵子闲了一阵子，把之前定的11月目标基本完成了，学习的webpack配置和打包知识马上在之后的年会抽奖项目中用上了，自己搭建了react和vue.js的两个小项目，backbone和underscore还没来得及学习，基本学习了下zepto和JQuery。

现在总结一下搭建项目中的一些知识。

在git上创建好项目之后，使用npm init可以自动创建package.json文件，使用npm install --save-dev可以安装库并存储到package.json文件中。

创建webpack.config.js文件，进行与webpack相关的配置。

以下是我在项目中配置的package.json 和 webpack.config.js 文件，以备以后做参考。

package.json:

{
  "name": "new-year-draw",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serverdev": "webpack-dev-server --progress --colors --inline",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-register": "^6.18.0",
    "chance": "^1.0.4",
    "css-loader": "^0.26.1",
    "fetch-ie8": "^1.4.3",
    "file-loader": "^0.9.0",
    "hammerjs": "^2.0.8",
    "html-webpack-plugin": "^2.26.0",
    "json-loader": "^0.5.4",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "n-zepto": "^1.2.0",
    "open-browser-webpack-plugin": "0.0.3",
    "script-loader": "^0.7.0",
    "style-loader": "^0.13.1",
    "underscore": "^1.8.3",
    "url-loader": "^0.5.7",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}

webpack.config.js:

var Webpack = require("webpack"),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'index.html',
        //hash: true,
        template: 'src/draw.html',
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
          // more options:
          // https://github.com/kangax/html-minifier#options-quick-reference
        }
      }),
      new OpenBrowserPlugin({
        url: 'http://127.0.0.1:8080/'
      })
    ],
    entry: ["./src/index.js"],
    output: {
        path: './dist',
        filename: "bundle.js"
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: "style!css"
        },
        {
          test: /\.less$/,
          loader: 'style!css!less'
        },
        {
          test: /\.json$/,
          loader: 'json'
        },
        {
          test : /(common\-module|src)\/.*\.js$/,
          exclude : /(src\/vendor\/|node_modules)/,
          loaders: ['babel?{"presets": "es2015", "compact": false}']
        },
        {
          test: /\.(gif|jpe?g|png|woff|svg|eot|ttf|mp3)\??.*$/,
          loader: "url-loader",
          query: {
            limit: 10000
          }
        }]
    },
    devServer: {
      port: 8080,
      host: '127.0.0.1',
      contentBase: './dist'
    }
}

在此项目中我用了webpack的devserver来运行程序，并配置了npm run serverdev来run devserver以及实时更新代码。

在webpack.config.js中要配置入口html和js文件。

自此，基于webpack的项目就基本配置完成了，之后再根据所用框架搭建router、model等等。。