From 92e43e89345dac350cf97e60a466c54300065575 Mon Sep 17 00:00:00 2001 From: lobos Date: Tue, 18 Apr 2017 17:28:08 +0800 Subject: [PATCH] build --- .eslintrc | 27 ++++++++++ .gitignore | 11 ++++ .npmrc | 3 ++ package.json | 45 ++++++++++++++++ src/index.js | 20 +++++++ src/styles/index.scss | 3 ++ webpack.config.js | 123 ++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 232 insertions(+) create mode 100644 .eslintrc create mode 100644 .gitignore create mode 100644 .npmrc create mode 100644 package.json create mode 100644 src/index.js create mode 100644 src/styles/index.scss create mode 100644 webpack.config.js diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..4f4f515 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,27 @@ +{ + "extends": ["airbnb"], + "parserOptions": { + "ecmaVersion": 2016, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } + }, + "env": { + "browser": true, + "es6": true, + "node": true + }, + "settings": { + "import/parser": "babel-eslint", + "import/resolver": { + "webpack": { + "config": "webpack.config.js" + } + } + }, + "rules": { + "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], + "semi": [2, "never"] + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7083a4e --- /dev/null +++ b/.gitignore @@ -0,0 +1,11 @@ +build +dist +lib-cov +coverage.html +.DS_Store +node_modules +publish +*.sock +*.swp +*.bat +*.sh \ No newline at end of file diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..8529089 --- /dev/null +++ b/.npmrc @@ -0,0 +1,3 @@ +phantomjs_cdnurl=http://cnpmjs.org/downloads +sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ +registry=https://registry.npm.taobao.org diff --git a/package.json b/package.json new file mode 100644 index 0000000..1c39079 --- /dev/null +++ b/package.json @@ -0,0 +1,45 @@ +{ + "name": "react-example", + "version": "1.0.0", + "description": "react example", + "main": "index.js", + "scripts": {}, + "keywords": [ + "react example" + ], + "author": "lobos841@gmail.com", + "repository": { + "type": "git", + "url": "git://github.com/lobos/react-example.git" + }, + "license": "MIT", + "dependencies": { + "react": "^15.5.4", + "react-dom": "^15.5.4" + }, + "devDependencies": { + "autoprefixer": "^6.7.7", + "babel-core": "^6.24.1", + "babel-eslint": "^7.2.2", + "babel-loader": "^6.4.1", + "babel-plugin-react-require": "^3.0.0", + "babel-plugin-transform-object-rest-spread": "^6.23.0", + "babel-preset-es2015": "^6.24.1", + "babel-preset-react": "^6.24.1", + "css-loader": "^0.28.0", + "eslint": "^3.19.0", + "eslint-config-airbnb": "^14.1.0", + "eslint-plugin-import": "^2.2.0", + "eslint-plugin-jsx-a11y": "^4.0.0", + "eslint-plugin-react": "^6.10.3", + "file-loader": "^0.11.1", + "less": "^2.7.2", + "less-loader": "^4.0.3", + "node-sass": "^4.5.2", + "postcss-loader": "^1.3.3", + "sass-loader": "^6.0.3", + "style-loader": "^0.16.1", + "url-loader": "^0.5.8", + "webpack": "^2.3.3" + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..3951382 --- /dev/null +++ b/src/index.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react' +import ReactDOM from 'react-dom' + +import '_/styles/index.scss' + +class App extends Component { + constructor(props) { + super(props) + + this.state = {} + } + + render() { + return ( +
Hello world.
+ ) + } +} + +ReactDOM.render(, document.getElementById('root')) diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 0000000..5a3a07f --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,3 @@ +body { + font-size: 14px; +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..af51ce3 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,123 @@ +const path = require('path') +const webpack = require('webpack') +const autoprefixer = require('autoprefixer') + +module.exports = { + entry: { + // 需要编译的入口文件 + app: './src/index.js', + }, + output: { + path: path.join(__dirname, '/build'), + + // 输出文件名称规则，这里会生成 'app.js' + filename: '[name].js', + }, + + // 引用但不打包的文件 + externals: { react: 'React', 'react-dom': 'ReactDOM' }, + + plugins: [ + + // webpack2 需要设置 LoaderOptionsPlugin 开启代码压缩 + new webpack.LoaderOptionsPlugin({ + minimize: true, + debug: false, + }), + + // Uglify的配置 + new webpack.optimize.UglifyJsPlugin({ + beautify: false, + comments: false, + compress: { + warnings: false, + drop_console: true, + collapse_vars: true, + }, + }), + ], + + resolve: { + // 给src目录一个路径，避免出现'../../'这样的引入 + alias: { _: path.resolve(__dirname, 'src') }, + }, + + module: { + rules: [ + { + test: /\.jsx?$/, + use: { + loader: 'babel-loader', + + // 可以在这里配置babelrc，也可以在项目根目录加.babelrc文件 + options: { + + // false是不使用.babelrc文件 + babelrc: false, + + // webpack2 需要设置modules 为false + presets: [ + ['es2015', { modules: false }], + 'react', + ], + + // babel的插件 + plugins: [ + 'react-require', + 'transform-object-rest-spread', + ], + }, + }, + }, + + // 这是sass的配置，less配置和sass一样，把sass-loader换成less-loader即可 + // webpack2 使用use来配置loader，并且不支持字符串形式的参数了，必须使用options + // loader的加载顺序是从后向前的，这里是 sass -> postcss -> css -> style + { + test: /\.scss$/, + use: [ + { loader: 'style-loader' }, + + { + loader: 'css-loader', + + // 开启了CSS Module功能，避免类名冲突问题 + options: { + modules: true, + localIdentName: '[name]-[local]', + }, + }, + + { + loader: 'postcss-loader', + options: { + plugins() { + return [ + autoprefixer, + ] + }, + }, + }, + + { + loader: 'sass-loader', + }, + ], + }, + + // 当图片文件大于10KB时，复制文件到指定目录，小于10KB转为base64编码 + { + test: /\.(png|jpg|jpeg|gif)$/, + use: [ + { + loader: 'url-loader', + options: { + limit: 10000, + name: './images/[name].[ext]', + }, + }, + ], + }, + ], + }, +}