webpack

Posted on   |  

webpack.config.js

  • 输出文件夹名必须为build（原因不明）
  • index.html 放到build文件夹下(否则不能自动刷新)
  • package.json script修改为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
'use strict';
var path = require('path');
module.exports = {
    entry: [
        path.resolve(__dirname, 'src/entry.js')
    ],
    output: {
        path: path.join(__dirname, 'build'),
        filename: "bundle.js"
    },
    externals: {
        'react': 'React'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: "jsx!babel", include: /src/},
            { test: /\.css$/, loader: "style!css"},
            { test: /\.scss$/, loader: "style!css!sass"},
            { test: /\.svg$/, loader: "url?limit=8192"}
        ]
    }
};

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "name": "myTodo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.13.3",
    "sass": "^0.5.0"
  },
  "devDependencies": {
    "babel-core": "^5.5.8",
    "babel-loader": "^5.1.4",
    "css-loader": "^0.14.5",
    "file-loader": "^0.8.4",
    "jsx-loader": "^0.13.2",
    "node-libs-browser": "^0.5.2",
    "node-sass": "^3.2.0",
    "sass-loader": "^1.0.2",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "webpack": "^1.9.11"
  }
}

要点

  • 输出文件夹名必须为build（原因不明）
  • index.html 放到build文件夹下(否则不能自动刷新)
  • package.json script修改为重点