├── src ├── index.less ├── components │ ├── carbon.png │ ├── app.less │ └── app.jsx ├── index.jsx └── index.html ├── .gitignore ├── .babelrc ├── screencapture.png ├── package.json ├── LICENSE ├── README.md ├── webpack.production.config.js └── webpack.config.js /src/index.less: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | npm-debug.log 3 | dist/ -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015","stage-0","react"] 3 | } -------------------------------------------------------------------------------- /screencapture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JasonBai007/webpack-starter-kit/HEAD/screencapture.png -------------------------------------------------------------------------------- /src/components/carbon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JasonBai007/webpack-starter-kit/HEAD/src/components/carbon.png -------------------------------------------------------------------------------- /src/components/app.less: -------------------------------------------------------------------------------- 1 | #wrap { 2 | position: absolute; 3 | top: 50%; 4 | left: 50%; 5 | transform: translate(-50%,-50%); 6 | font-size: 30px; 7 | padding: 20px; 8 | text-align: center; 9 | font-family: cursive; 10 | } -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './components/app.jsx'; 4 | 5 | import './index.less'; 6 | 7 | // 如果使用jQuery 8 | // let $ = require('jquery'); 9 | 10 | ReactDOM.render( 11 | , 12 | document.getElementById('app') 13 | ); 14 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | webpack-starter-kit 6 | 7 | 8 | 9 |

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/app.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './app.less'; 4 | import 'font-awesome/css/font-awesome.min.css'; 5 | import imgSrc from "./carbon.png"; 6 | 7 | export default class App extends React.Component { 8 | constructor(props) { 9 | super(props); 10 | } 11 | render() { 12 | return ( 13 |

14 |

Hello World

15 |

16 |

17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-starter-kit", 3 | "version": "2.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --progress --hot --colors", 8 | "build": "webpack --progress --colors --config webpack.production.config.js" 9 | }, 10 | "author": "baiyanyun", 11 | "license": "MIT", 12 | "dependencies": { 13 | "font-awesome": "^4.7.0", 14 | "jquery": "^3.2.1", 15 | "react": "^15.5.4", 16 | "react-dom": "^15.5.4" 17 | }, 18 | "devDependencies": { 19 | "babel-core": "^6.24.1", 20 | "babel-loader": "^6.4.1", 21 | "babel-preset-es2015": "^6.24.1", 22 | "babel-preset-react": "^6.24.1", 23 | "babel-preset-stage-0": "^6.24.1", 24 | "css-loader": "^0.28.0", 25 | "extract-text-webpack-plugin": "^2.1.0", 26 | "file-loader": "^0.11.1", 27 | "less": "^2.7.2", 28 | "less-loader": "^4.0.3", 29 | "open-browser-webpack-plugin": "0.0.5", 30 | "style-loader": "^0.16.1", 31 | "url-loader": "^0.5.8", 32 | "webpack": "^2.3.3", 33 | "webpack-dev-server": "^2.4.2" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Bai Yanyun 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Profile 2 | > Target：使用Webpack提升前端开发效率 3 | > Techs：NodeJs + Npm + React + Babel + Webpack + Less 4 | 5 | ### Features 6 | * 支持 ES6 7 | * 支持 React 8 | * 支持 jQuery 9 | * 支持 Less 10 | * 支持 Font-Awesome 11 | 12 | ### Usage 13 | > 1、安装依赖：$ npm install 14 | > 2、启动应用：$ npm run dev 15 | > 3、静态编译：$ npm run build 16 | 17 | ### Articals 18 | * [webpack 教科书式入门教程](https://segmentfault.com/a/1190000005022872) 19 | * [Webpack傻瓜指南（一）](https://zhuanlan.zhihu.com/p/20367175) 20 | * [Webpack傻瓜指南（二）开发和部署技巧](https://zhuanlan.zhihu.com/p/20397902) 21 | * [基于webpack的前端工程化开发之多页站点篇（一）](https://segmentfault.com/a/1190000004511992) 22 | * [基于webpack的前端工程化开发之多页站点篇（二）](https://segmentfault.com/a/1190000004516832) 23 | 24 | ### Notes 25 | Which version of the package is installed? 26 | 27 | If there is no package.json file in the local directory, the latest version of the package is installed. 28 | 29 | If there is package.json file, the latest version satisfying the semver rule declared in package.json for that package (if there is any) is installed.【注意到这条了吗？这里是一个坑，意味着有些时候，版本号写死可能更靠谱】 30 | 31 | Webpack已升级到2.x版本 32 | 33 | ### Screencapture 34 | ![screen](https://github.com/jasonBai007/webpack-starter-kit/raw/master/screencapture.png) 35 | -------------------------------------------------------------------------------- /webpack.production.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var path = require('path'); 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); //抽取CSS文件插件 4 | 5 | module.exports = { 6 | entry: { 7 | index: path.resolve(__dirname, 'src/index.jsx'), 8 | vendors:['react','react-dom'] //第三方库和框架 9 | }, 10 | output: { 11 | path: path.resolve(__dirname, 'dist'), 12 | publicPath:'dist/', //居然影响了html中的图片路径 13 | filename: 'js/[name].buddle.js' 14 | }, 15 | module: { 16 | rules: [ 17 | { test: /\.css$/, use: ExtractTextPlugin.extract({fallback:'style-loader', loader:'css-loader'}) }, 18 | { test: /\.less$/, use: ExtractTextPlugin.extract("css-loader!less-loader") }, 19 | { test: /\.js[x]?$/, exclude: /node_modules/, use: 'babel-loader' }, 20 | { test: /\.(png|jpg|jpeg|gif)$/, use: 'url-loader?limit=1024&name=img/[name].[ext]' }, 21 | { test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/, use: 'url-loader' } 22 | ] 23 | }, 24 | resolve: { 25 | extensions: ['.js','.json','.jsx'], 26 | }, 27 | plugins: [ 28 | new webpack.optimize.CommonsChunkPlugin({'name':'vendors','filename':'js/vendors.js'}), 29 | new ExtractTextPlugin("css/[name].buddle.css"), 30 | new webpack.ProvidePlugin({ $: "jquery" }), 31 | new webpack.optimize.UglifyJsPlugin({ 32 | compress: { 33 | warnings: false 34 | } 35 | }) 36 | ] 37 | }; 38 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var path = require('path'); 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 4 | var OpenBrowserPlugin = require('open-browser-webpack-plugin'); 5 | 6 | module.exports = { 7 | devServer: { 8 | historyApiFallback: true, 9 | hot: true, 10 | inline: true, 11 | contentBase: './src' 12 | }, 13 | entry: { 14 | index: path.resolve(__dirname, 'src/index.jsx'), 15 | vendors:['react','react-dom'] //第三方库和框架 16 | }, 17 | output: { 18 | path: '/src/dist/', 19 | publicPath:'dist/', //居然影响了html中的图片路径 20 | filename: 'js/[name].buddle.js' 21 | }, 22 | module: { 23 | rules: [ 24 | { test: /\.css$/, use: ExtractTextPlugin.extract({fallback:'style-loader', loader:'css-loader'}) }, 25 | { test: /\.less$/, use: ExtractTextPlugin.extract("css-loader!less-loader") }, 26 | { test: /\.js[x]?$/, exclude: /node_modules/, use: 'babel-loader' }, 27 | { test: /\.(png|jpg|jpeg|gif)$/, use: 'url-loader?limit=1024&name=img/[name].[ext]' }, 28 | { test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/, use: 'url-loader' } 29 | ] 30 | }, 31 | resolve: { 32 | extensions: ['.js','.json','.jsx'], 33 | }, 34 | plugins: [ 35 | new webpack.optimize.CommonsChunkPlugin({'name':'vendors','filename':'js/vendors.js'}), 36 | new ExtractTextPlugin("css/[name].buddle.css"), 37 | new webpack.ProvidePlugin({ $: "jquery" }), 38 | new OpenBrowserPlugin({ url: 'http://localhost:8080' }) 39 | ] 40 | }; 41 | --------------------------------------------------------------------------------