2019独角兽企业重金招聘Python工程师标准>>> 
自己花了几个月时间自学前端、在百度的帮助下迷糊了几个月 幸好还有谷歌
现在把自己学的东西 知识 整理下
所以 这个不是大神的教程 是同样小白的学习笔记
希望自己走过的坑可以帮助其他小白别踩 比我少绕弯路
1、开始需要的环境
电脑安装了node会基本的npm安装
node教程指向：http://www.imooc.com/learn/348 慕课网node教程
node的知识很深 我们只需要了解到node的模块与包管理就可以了 想更深入的可以继续钻研下去 node是可以构建服务端的。
2、什么是webpack 作用是什么？
js文件的打包 压缩 混淆 还可以通过插件 处理一些less scss es6转换等等工作
给我们提供整套工作方案 写代码更简便舒心
可以理解为一个工作台、脚手架
3、新建react项目
新建目录 目录名称项目名
/根文件夹
|—app
| |—components 组件目录 里边存放react组件
| |—images 图片文件目录
| |—sass sass文件目录
| |—main.js js入口文件
|
|—build
| |—index.html 应用入口
|
|—dist wegpack打包的生产目录
|
|—package.json
|—webpack.config.js 开发环境配置文件
|—webpack.production.config.js 生产环境配置文件
以后会根据内容的提升新增目录 比如redux、router之类的
初始化react环境
npm init
cnpm install react-dom --save
cnpm install react --save
4、webpack安装与配置
贴下package.json 需要安装的列表
—————babel处理了es6语法还有将react编译——————
"babel-core": "^6.9.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-polyfill": "^6.9.1",
"babel-preset-stage-0": "^6.5.0",
——————react热插拔———————
"react-hot-loader": "^1.3.0",
——————基本模块—————
"webpack": "^1.13.1",
"react": "^15.1.0",
"react-dom": "^15.1.0",
——————开启web服务———————
"webpack-dev-server": "^1.14.1”,
———————处理sass css 图片————————
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"sass-loader": "^3.2.0",
"node-sass": "^3.7.0"
package.json 新增：
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
}解释：
- webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
- --devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
- --progress - 显示合并代码进度
- --colors - Yay，命令行中显示颜色！
- --content-base build - 指向设置的输出目录
当你运行 npm run dev 的时候，会启动一个 Web 服务器，然后监听文件修改，然后自动重新合并你的代码。真的非常简洁！
先说下工作 或者开发模式 跟生产模式 有什么不同
其实可以理解为两个webpack的配置文件 文件大部分配置相同
一个是在开发时候开启的 里边配置了工具来帮助开发
一个是开发后打包应用的 所以剔除了开发模式时候提供的工具之类的
这里 webpack.config.js 是默认的配置文件名称 也是开发模式配置文件
webpack.production.config.js 是生产模式配置文件 当然名字可以自己起 在写package.json 命令时候 自己指定名称就行
贴下工作模式下 webpack.config.js 配置
var path = require('path');
// var node_modules = path.resolve(__dirname, 'node_modules');
// var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
// var pathToReacttow = path.resolve(node_modules, 'react-dom/dist/react-dom.min.js');
var config = {
entry: [
/** 文件更新后 浏览器自动刷新*/
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
/** 打包的入口文件*/
path.resolve(__dirname, 'app/main.js')
],
// resolve: {
// alias: {
// 'react': pathToReact,
// 'react-dom': pathToReacttow
// }
// },
/** 打包的出口文件*/
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015','react']
}
},
{
/** 编译sass文件*/
test: /\.scss$/,
loader: 'style!css!sass'
}, {
/** 图片如果不大于 25KB 的话要自动转成 BASE64 字符串*/
test: /\.(png|jpg)$/,
loader: 'url?limit=25000'
}
]
// noParse: [pathToReact , pathToReacttow]
}
};
module.exports = config;
配置生产模式
package.json新增
"scripts": {
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",
"deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js"
},
生产模式webpack.production.config.js配置
var path = require('path');
var webpack = require('webpack');
var node_modules_dir = path.resolve(__dirname, 'node_modules');
var config = {
entry: [
path.resolve(__dirname, 'app/main.js')
],
/** 打包的出口文件*/
output: {
publicPath:'./',
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: [node_modules_dir],
query: {
presets: ['es2015', 'react']
}
},
{
/** 编译sass文件*/
test: /\.scss$/,
loader: 'style!css!sass'
}, {
/** 图片如果不大于 25KB 的话要自动转成 BASE64 字符串*/
/** loader的&name=img/[name].[ext] 指定了图片要放在img文件夹下*/
test: /\.(png|jpg)$/,
loader: 'url?limit=25000&name=img/[name].[ext]'
}
]
// noParse: [pathToReact , pathToReacttow]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
})
]
};
module.exports = config;
入口js文件添加 : import "babel-polyfill"; //es6 api
npm run dev 开启开发模式 浏览器 访问 http://localhost:8080
npm run deploy 开启生产 打包文件 文件会打包到dist文件夹下