webpack react基础配置一

  • Z时代
  • 2024-01-10
  • 分类：综合

react

简单介绍webpack react基本配置，入门型：

环境配置：

依赖nodejs，官网下载最新版的nodejs：nodejs.org/en 

安装完nodejs  npm便自动集成了，通过npm安装其他环境

$ npm install webpack -g    安装webpack

 

当然如果常规项目还是把依赖写入 package.json 包去更人性化：

$ npm init$ npm install webpack --save-dev  

 

打开项目根目录  shift+右键  选择当前文件夹打开命令框

执行 $ npm init   一步一步创建 package.json

loader加载器  安装css-loader  style-loader ：

npm install css-loader style-loader --save-dev

 

到这步基本可以使用了：

创建两个js  

c.js

 d.js

 打开项目根目录  shift+右键  选择当前文件夹打开命令框  输入命令

 $ webpack js/d.js build/build.js  

第一个js是入口文件  第二个是出口文件  最终将c.js于d.js 打包成 build.js

-------------------------------------------------------------------------------------------

 在项目根目录下创建 webpack.config.js  配置文件  可以配置参数 直接打包

module.exports = {
  entry:"./js/d.js",
  output:{
    path:"./build/",
    filename:"cd.js"
  },
  module:{
    loaders:[
      {
        test:/.css$/,
        loaders:["style","css"],
        exclude:"/node_modules/"
      }
    ]
  },
  resolve:{
    extensions:['','.js','.css','.jsx']
  }
}

说明：

有了配置文件  可以直接输入命令：

$ webpack      进行打包

未完待续。。。

　　

 

以上是 webpack react基础配置一 的全部内容， 来源链接： utcz.com/z/381335.html

回到顶部