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