- webpack+babel+react环境安装:
mkdir webpack-test && cd webpack-teat
终端新建文件夹并打开npm init
初始化项目结构,才能在结构中添加package.json- 在根目录下创建src文件夹,并创建src/index.js文件
- 安装webpack
cnpm install --save-dev webpack
- 安装webpack-cli
cnpm install --save-dev webpack-cli
- webpack-test中创建src和dist文件夹,创建index.html和webpack.config.js文件
src文件夹中创建index.js文件 - 分别在index.html和index.js加入代码,配置 webpack.config.js(重要)
- 配置package.json
- 执行打包
npx webpack
- err1:
WARNING in configuration The 'mode' option has not been set...
解决: WARNING信息,如想去除,需要在配置文件中指定mode的值 - err2:
其中有一句报错信息: You may need an appropriate loader to handle this file type.
解决: 需要配置一个loader来解决这个错误,因为webpack在打包的时候,不认识react的jsx语法,需要先进行转换再打包,而这个工作就需要loader:babel-loader - err3:
cannot find module'webpack'
解决:npm link webpack - 引入babel
cnpm install @babel/core @babel/preset-react babel-loader --save-dev
- webpack.config.json中配置:
use: { loader: "babel-loader", options: { presets: ["@babel/preset-react"] }
- 引入react:
cnpm install react react-dom --save
- 注意:webpack不像前兼容,webpack3的配置文件失效,webpack4引入了模式,开发模式,生产模式(压缩过的)
- react语法入门:
- script 标签的 type 属性为 text/babel
- react.js 核心库、react-dom.js dom相关功能 和 Browser.js babel 浏览器转换jsx的功能,它们必须首先加载
- ReactDOM.render 将模板转为 HTML 语言,并插入指定的 DOM 节点。
- JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员
webpack+babel+react环境配置
猜你喜欢
转载自blog.csdn.net/sinat_37186459/article/details/89007021
今日推荐
周排行