react从零到native--npm及webpack学习

1.npm 更新命令：npm install -g npm

2.查看npm版本号：npm -v

   查看node版本号：node -v

3.安装webpack:

   查看当前目录已安装的webpack模块版本：npm list webpack

   查看全局安装过的模块：npm list -g --depth 0

   获取webpack所有可用版本命令：

    npm view webpack versions(简)

    npm info webpack(详)

   全局安装webpack及webpack-dev-server:
npm install -g webpack@2.x webpack-dev-server@2.x

   查看已安装webpack的版本号：webpack -v

4.使用git bash或cmd进入某个目录执行：npm init 生成package.json文件

5.构建webpack.config.js文件：module.exports = {
entry: './main.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}
]
}
};
其中module.loaders被用来按照正则分配加载器，以上使用babel-loader同时需要babel-preset-es2015和babel-preset-react插件来翻译es6和react的语法。也可另外的一种方式设置babel的查询选项：

module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}

※不同的加载器通过 ! 进行连接，? 用于传参给加载器

※css-loader?modules本模块加载的css是本地作用域的，不会作用于除模块以外的dom，除非使用:global(.className)

6.有了webpack.config.js文件，启动服务器：webpack-dev-server，

   访问http://localhost:8080（如果8080端口占用，会自动分配8081，请注意看git bash打印的提示）

   热部署启动webpack server：webpack-dev-server --hot --inline