├── .gitignore
├── src
├── a.jpg
└── main.js
├── index.html
├── .babelrc
├── webpack.config.js
├── .eslintrc.js
├── package.json
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
--------------------------------------------------------------------------------
/src/a.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/seehuang/webpack-react-cli/HEAD/src/a.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 11111
9 |
10 |
11 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [
4 | "es2015",
5 | { "modules": false }
6 | ],
7 | "react"
8 | ],
9 | "plugins": ["react-hot-loader/babel"]
10 | }
11 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: hc
3 | * @Date: 2018-03-28 09:00:53
4 | * @Last Modified by: hc
5 | * @Last Modified time: 2018-03-28 09:01:25
6 | */
7 | //获取环境命令，并除去首位空格
8 | const env = process.env.NODE_ENV.replace(/(\s*$)|(^\s*)/ig,"");
9 |
10 | //根据环境变量引用的相关的配置文件
11 | module.exports = require(`./build/webpack.conf.${env}.js`)
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: hc
3 | * @Date: 2018-03-27 18:32:47
4 | * @Last Modified by: hc
5 | * @Last Modified time: 2018-03-29 12:20:51
6 | */
7 | import React,{Component} from 'react'
8 | import ReactDOM from 'react-dom'
9 | import imgA from './a.jpg'
10 | class App extends React.Component {
11 | render(){
12 | return (
13 |
14 |
1111112223ff31111111
15 |
16 |
17 |
28 | │ .babelrc
29 | │ .eslintrc.js
30 | │ .gitignore
31 | │ index.html
32 | │ package.json
33 | │ README.md
34 | │ webpack.config.js
35 | │
36 | ├─build //webpack构建配置
37 | │ webpack.conf.base.js
38 | │ webpack.conf.dev.js
39 | │ webpack.conf.lint.js
40 | │ webpack.conf.prod.js
41 | │
42 | └─src //项目源码
43 | a.jpg
44 | main.js
45 |
46 |
47 |
48 |
49 | ## 运行项目
50 |
51 |
52 | npm run dev 开发环境，启用服务，浏览器输入localhost:8080/index.html
53 | npm run build 生产环境，项目被打包到dist文件夹
54 | npm run lint 启用eslint检测代码
55 |
56 |
57 | ## 项目依赖
58 |
59 | 1.安装 webpack 和 webpack-dev-server
60 | npm install webpack webpack-dev-server --save-dev
61 |
62 | 2.安装 webpack-merge
63 | npm install webpack-merge --save-dev
64 | 该插件用来对 webpack 配置进行合并操作。
65 |
66 | 3.安装 babel 相关插件
67 | npm install babel-core babel-loader babel-preset-env babel-plugin-transform-es2015-spread --save-dev
68 | 这系列插件用来对 ES6 语法进行转换。
69 |
70 | 4.安装样式处理相关插件
71 | npm install css-loader style-loader postcss-loader autoprefixer --save-dev
72 | 这系列插件用来处理 CSS 样式，其中 autoprefixer 是 postcss 的一个插件，用来自动给 CSS 样式添加前缀。
73 |
74 | 5.安装 file-loader
75 | npm install file-loader --save-dev
76 | 该插件将在导入图片、字体等文件时发挥作用，主要是针对css中的url。
77 |
78 | 6.安装 ESLint 相关的插件
79 | npm install eslint eslint-loader --save-dev
80 | 这些插件用来对 JavaScript 代码进行检查。
81 |
82 | 7.安装 html-webpack-plugin 插件
83 | npm install html-webpack-plugin --save-dev
84 | 该插件用来自动生成 HTML 文件。
85 |
86 | 8.安装 extract-text-webpack-plugin 插件
87 | npm install extract-text-webpack-plugin --save-dev
88 | 该插件用来将 CSS 抽取到独立的文件。
89 |
90 | 9.安装 clean-webpack-plugin 插件
91 | npm install clean-webpack-plugin --save-dev
92 | 该插件用来对 dist 文件夹进行清理工作，每次打包时先清理之前的 dist 文件夹。
93 |
94 |
95 |
96 |
97 |
98 |
99 |
--------------------------------------------------------------------------------