# 安装node.js
安装node.js
安装前确保已经安装Homebrew,使用Homebrew安装Node.js这样就可以使用npm 命令 使用MAC终端
```
brew install node
```
# 安装webpack
```
$ npm install webpack --global //全局安装webpack
$ cd ~项目目录
$ npm init
$ npm install webpack --save-dev
```
# 安装项目依赖
1.准备工作 安装项目依赖
```
$ npm install --save-dev babel-core babel-preset-es2015 babel-preset-react webpack-dev-server babel-loader react-hot-loader css-loader style-loader react react-dom [email protected]
```
2.把package.json文件的devDependencies里的复制一份到dependencies里面
# 配置webpack
### 配置创建根目录webpack.config.js
##### 1.入口文件配置（entry）
Polyfilla把旧的浏览器想象成为一面有了裂缝的墙.这些[polyfills]会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁(浏览器)内核版本太低不支持es6新语法。只要安装babel-polyfill插件，即可.
babel-polyfill用正确的姿势安装之后，引用方式有三种：
1.require("babel-polyfill");
2.import "babel-polyfill";
3.module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
注：第三种方法适用于使用webpack构建,加入到webpack配置文件(webpack.config.js)entry项中
重新执行构建命令，在低版本的浏览器中就可以正常打开页面了
react 这个库的核心代码就有 627 KB，这样和我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置
如果是一个数组，会将数组里面的文件一起打包到bundle.js
如果传入一个字符串，这个字符串就会被解析为启动时加载的模块。
如果传入个数组，所有模块都是启动时加载，模块导出到最后一个里面()。
如果传入一个对象，就会创建多个输入包文件(vendor.js和bundle.js)，对象键值就chunk的name，值可以是字符串或者是数组。
```
{
entry: {
bundle: ["babel-polyfill", "./index.js"],/*入口文件路径*/
vendor: ['react', 'react-dom', 'react-router']/*一起打包的库*/
}
plugins: {
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
}
}
```
这样打包之后就会多出一个 vendor.js 文件，之后在引入我们自己的代码之前，都要先引入这个文件。比如在 index.html 中
```
<script src="/build/vendor.js"></script>
<script src="/build/bundle.js"></script>
```
##### 2.入口文件输出配置（output)
1.path
绝对路径 (required).
[hash] 被编译后文件hash替换.
编译文件的输出路径: path.join(__dirname, 'dist')或者path.resolve(__dirname, "public/assets")
2.publicPath
生产环境下要加上 publicPath不然的话，webpack 在加载 chunk 的时候，路径会出错
publicPath指定了一个在浏览器中被引用的URL地址。 对于使用<script> 和 <link>加载器，当文件路径不同于他们的本地磁盘路径（由path指定）时候publicPath被用来作为href或者url指向该文件。这种做法在你需要将静态文件放在不同的域名或者CDN上面的时候是很有用的。 Webpack Dev Server 也是用这个方式来读取文件的。与path搭配使用上[hash]就可以做好缓存方案了。
2.filename
指定输出到硬盘的文件的的文件名。这里不能是一个绝对的路径！output.path会确定该文件的存在硬盘额路径的。filename仅仅用来给每个文件命名而已。
单一入口
```
{
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: './built'
}
}
// 写入磁盘: ./built/bundle.js
```
多入口
如果你的配置创建了多于一个的"chunk"(也就是带有多个入口点，或者使用了CommonsChunkPlugin这样的插件)，你应该使用替换符来为每个文件命名一个为一个名字。
[name]被chunk的名字替换.
[hash]被编译器hash替换.
[chunkhash] 被chunk的hash替换.
```
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/built'
}
}
// 谢如磁盘: ./built/app.js, ./built/search.js
```
##### 3.加载器配置（module）
module 有loaders选项和noParse选项，noParse选项配置不需要解析的目录和文件
```
module: {
loaders:[
{
test:/\.js$/,
loader:'babel-loader',
query: {
presets: ['es2015', 'react'],
}
},
{test:/\.css$/,loader:'style-loader!css-loader'},
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=10000&name=./img/[hash].[ext]'}
]
},
```
##### 4.其他配置（resolve）
配置默认扩展名
1.需要有一个默认空字符串“”，否则在require 全名的时候反而会找不到
2.默认值是[“”, “.webpack.js”, “.web.js”, “.js”]
```
resolve: {
extensions: ['.', '.js', '.jsx']
},
```
##### 5.压缩插件 (plugins)
webpack 自带了一个压缩插件UglifyJsPlugin,加入了这个插件之后，编译的速度会明显变慢，所以一般只在生产环境启用。
另外，服务器端还可以开启 gzip 压缩，优化的效果更明显只需要在配置文件中引入即可
```
{
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
```
```
plugins:[
// 定义生产环境，编译React 时压缩到最小
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
//分离css和js文件
new ExtractTextPlugin('[name].css'),
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor'],
file: '[name].js'
}),
new webpack.optimize.UglifyJsPlugin({
// 最紧凑的输出
beautify: false,
// 删除所有的注释
comments: false,
compress:{
warnings:false,
// 还可以兼容ie浏览器删除所有的 `console` 语句
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true,
},
mangle:{
except:['$super','$','exports','require']
}
})
]
```
```
/*
。
*/
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports={
// 入口文件配置（entry）
entry: {
bundle: ["babel-polyfill", "./index.js"],
vendor: ['react', 'react-dom', 'react-router']
},
//入口文件输出配置（output)
output:{
path: path.resolve(__dirname, "dist/js"),
publicPath: '/dist/',
filename: "[name].js"
},
//加载器配置（module）
module: {
loaders:[
{
test:/\.js$/,
loader:'babel-loader',
exclude: /node_modules/, //屏蔽不需要处理的文件（文件夹）（可选）
query: {
presets: ['es2015', 'react'],
}
},
{test:/\.css$/,loader:'style-loader!css-loader'},
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=10000&name=./img/[hash].[ext]'}
]
},
//其他配置（resolve）
resolve:{
extensions: ['.', '.js', '.jsx']
},
//压缩插件
plugins:[
// 定义生产环境，编译React 时压缩到最小
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
//分离css和js文件
new ExtractTextPlugin('[name].css'),
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor'],
file: '[name].js'
}),
new webpack.optimize.UglifyJsPlugin({
// 最紧凑的输出
beautify: false,
// 删除所有的注释
comments: false,
compress:{
warnings:false,
// 还可以兼容ie浏览器删除所有的 `console` 语句
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true,
},
mangle:{
except:['$super','$','exports','require']
}
})
]
};
```
2.安装 css loader 和style loader
```
$ npm install css-loader style-loader --save-dev
```
3.在index.js 调用自己的css样式文件style.css代码require('style!css!./style.css')
4.在webpack.config.js文件里设置test:/\.css$/,loader:'style-loader!css-loader'
5 运行 webpack 打包, 运行 webpack-dev-server 启动服务器. 访问 http://localhost:8080/
6.安装npm install react react-dom --save 把React安装到项目里
7.创建bebal的配置文件.babelrc文件{
"presets": ["es2015"]
}
//可不用1.设置bundle.js.map 使用source-map工具打包的项目方便调试
//可不用2.安装source-map终端:webpack --devtool source-map
Git 创建忽略文件
1. cd 到文件
2. touch .gitignore
3. vim .gitignore
react使用流程
猜你喜欢
转载自blog.csdn.net/zhjw1991/article/details/82689618
今日推荐
周排行