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

最新推荐文章于 2024-05-16 09:35:34 发布

原创最新推荐文章于 2024-05-16 09:35:34 发布 · 708 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用npm命令更新和查看版本、安装Webpack及其相关配置。包括如何生成package.json文件、创建webpack.config.js文件并配置加载器，以及启动Webpack开发服务器的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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