├── .babelrc ├── src ├── common │ ├── normal.css │ └── index.scss ├── index.js └── index.scss ├── README.md ├── .gitignore ├── package.json ├── webpack.config.js └── webpack.happypack.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ['es2015'], 3 | "plugins": [] 4 | } -------------------------------------------------------------------------------- /src/common/normal.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | body{ 4 | font-size: 12px; 5 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './index.scss'; 2 | 3 | 4 | console.log(2212) -------------------------------------------------------------------------------- /src/common/index.scss: -------------------------------------------------------------------------------- 1 | @import '~normalize.css/normalize.css'; 2 | 3 | 4 | a{ 5 | color: red; 6 | } -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | 2 | @import '~common'; 3 | 4 | .abc{ 5 | display: block; 6 | } 7 | 8 | .test{ 9 | line-height: 20px; 10 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # happyPackDemo 2 | 3 | 1. normal pack : 4 | 5 | ``` 6 | tnpm run build 7 | ``` 8 | 9 | 2. pack with happyPack 10 | 11 | ``` 12 | 13 | tnpm run happyPack 14 | ``` -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | *.swo 3 | *.html~ 4 | *.js~ 5 | *.coffee~ 6 | *.css~ 7 | *.less~ 8 | *.orig 9 | .svn/ 10 | .typeDefine 11 | node_modules/ 12 | .idea 13 | npm-debug.log 14 | .DS_Store 15 | *.sublime-project 16 | *.sublime-workspace 17 | 18 | build/ 19 | .happypack -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "asda", 3 | "version": "0.0.1", 4 | "main": "src/index.js", 5 | "scripts": { 6 | "build": "webpack --config ./webpack.config.js --progress", 7 | "happyPack": "webpack --config ./webpack.happypack.js --progress" 8 | }, 9 | "dependencies": { 10 | "normalize.css": "^5.0.0" 11 | }, 12 | "devDependencies": { 13 | "babel-core": "^6.7.4", 14 | "babel-loader": "^6.2.4", 15 | "babel-preset-es2015": "^6.5.0", 16 | "happypack": "^2.2.1", 17 | "extract-text-webpack-plugin": "^1.0.1", 18 | "css-loader": "~0.23.1", 19 | "style-loader": "~0.13.0", 20 | "fast-sass-loader": "^1.0.7", 21 | "node-sass": "3.10.0", 22 | "sass-loader": "^4.1.1", 23 | "webpack": "^1.9.11" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | 4 | const path = require('path'); 5 | const webpack = require('webpack'); 6 | const HappyPack = require('happypack'); 7 | const os = require('os'); 8 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); 9 | const createHappyPlugin = function (id, loaders) { 10 | return new HappyPack({ 11 | id: id, 12 | loaders: loaders, 13 | threadPool: HappyPack.ThreadPool({size: os.cpus().length }), 14 | cache: true, 15 | verbose: true 16 | }); 17 | }; 18 | 19 | let webpackConfig = { 20 | entry: { 21 | normal: './src/index.js' 22 | }, 23 | output: { 24 | path: path.join(__dirname, process.env.BUILD_DEST ||'build'), 25 | filename: '[name].js', 26 | publicPath: '/static/' 27 | }, 28 | externals: {}, 29 | resolve: { 30 | alias: { 31 | 'common': path.join(__dirname, 'src/common/index.scss') 32 | } 33 | }, 34 | module: { 35 | loaders: [ 36 | { 37 | test: /\.jsx?$/, 38 | loader: "happypack/loader?id=js", 39 | exclude: /node_modules/ 40 | }, 41 | { 42 | test: /\.css$/, 43 | loader: ExtractTextPlugin.extract("style", "css") 44 | }, 45 | { 46 | test: /\.scss$/, 47 | loader: ExtractTextPlugin.extract("style", 'css!sass') 48 | } 49 | ] 50 | }, 51 | plugins: [ 52 | new ExtractTextPlugin("[name].css"), 53 | createHappyPlugin('js', ['babel']), 54 | ] 55 | }; 56 | 57 | 58 | module.exports = webpackConfig; -------------------------------------------------------------------------------- /webpack.happypack.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | const os = require('os'); 6 | const webpack = require('webpack'); 7 | const HappyPack = require('happypack'); 8 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); 9 | const createHappyPlugin = function (id, loaders) { 10 | return new HappyPack({ 11 | id: id, 12 | loaders: loaders, 13 | threadPool: HappyPack.ThreadPool({size: os.cpus().length }), 14 | cache: true, 15 | verbose: true 16 | }); 17 | }; 18 | 19 | const env = process.env.NODE_ENV; 20 | 21 | let webpackConfig = { 22 | entry: { 23 | happyPack: './src/index.js' 24 | }, 25 | output: { 26 | path: path.join(__dirname, process.env.BUILD_DEST ||'build'), 27 | filename: '[name].js', 28 | publicPath: '/static/' 29 | }, 30 | externals: {}, 31 | resolve: { 32 | alias: { 33 | 'common': path.join(__dirname, 'src/common/index.scss') 34 | } 35 | }, 36 | module: { 37 | loaders: [ 38 | { 39 | test: /\.jsx?$/, 40 | loader: "happypack/loader?id=js", 41 | exclude: /node_modules/ 42 | }, 43 | { 44 | test: /\.css$/, 45 | loader: ExtractTextPlugin.extract("style", "happypack/loader?id=css") 46 | }, 47 | { 48 | test: /\.scss$/, 49 | loader: ExtractTextPlugin.extract("style", "happypack/loader?id=scss") 50 | } 51 | ] 52 | }, 53 | plugins: [ 54 | new ExtractTextPlugin("[name].css"), 55 | createHappyPlugin('css', ['css']), 56 | createHappyPlugin('js', ['babel']), 57 | createHappyPlugin('scss', ["css", "sass-loader" ]), 58 | ] 59 | }; 60 | 61 | 62 | module.exports = webpackConfig; --------------------------------------------------------------------------------