react+webpack（未试）

<1>手动搭建

创建空项目文件夹。

建议安装cnpm，下文所有npm可以用cnpm代替
npm install -g cnpm --registry=https://registry.npm.taobao.org

初始化 npm 环境

npm init 一路回车即可


依赖安装

npm i webpack -D
npm i webpack-cli -D (因为webpak 到 4版本以上 就需要这个 ，不然会报错)

创建目录及配置文件

创建 src文件夹，src下创建webpack打包入口文件 index.js
创建webpack.config.js 并编写配置文件。

const path = require('path') // 引入‘path’，为了在这里使用绝对路径，避免相对路径在不同系统时出现不必要的问题
var webpack = require('webpack')
module.exports = {
　　// 应用入口
　　entry: {
　　　　app: path.join(__dirname, './src/index.js') // index.js作为打包的入口
　　},
　　// 输出目录
　　output: {
　　　　filename: 'build.js',
　　　　// filename: '[name].[hash:8].js', //name代表entry对应的名字; hash代表 整个app打包完成后根据内容加上hash。一旦整个文件内容变更，hash就会变化
　　　　path: path.join(__dirname, 'dist'), // 打包好之后的输出路径
　　},
}


修改package.json 下

在script中添加如下代码:

"build": "webpack --mode production"
执行 npm run build
就可以把src下面的index.js文件打包出来了，在dist文件夹可以看到打包文件
build.js最后可以看到写的内容

需要引入 babel-loader 来编译 es6

npm i babel-core babel-loader babel-preset-env -D
npm install babel babel-cli -D
npm install babel-preset-react babel-preset-es2015 -D

然后配置loader

const path = require('path') // 引入‘path’，为了在这里使用绝对路径，避免相对路径在不同系统时出现不必要的问题
var webpack = require('webpack')
module.exports = {
　　// 应用入口
　　entry: {
　　　　app: path.join(__dirname, './src/index.js') // index.js作为打包的入口
　　},
　　// 输出目录
　　output: {
　　　　filename: 'build.js',
　　　　// filename: '[name].[hash:8].js', //name代表entry对应的名字; hash代表 整个app打包完成后根据内容加上hash。一旦整个文件内容变更，hash就会变化
　　　　path: path.join(__dirname, 'dist'), // 打包好之后的输出路径
　　},
　　module: {
　　　　rules: [{
　　　　　　test: /\.(js|jsx)$/, //使用loader的目标文件。这里是.js
　　　　　　use: {
　　　　　　　　loader: 'babel-loader',
　　　　　　　　options: {
　　　　　　　　　　presets: ["env", "react"] //['@babel/preset-react']
　　　　　　　　},
　　　　　　},
　　　　　　exclude: [
　　　　　　　　path.join(__dirname, '../node_modules') // 由于node_modules都是编译过的文件，这里我们不让babel去处理其下面的js文件
　　　　　　]
　　　　}]
　　}
}


在项目根目录下创建 babel 的配置文件： .babelrc （前面有个点）

{
　　"presets": [
　　　　["es2015", {"loose": true}],
　　　　"react"
　　]
}

此时再执行 npm run build可能报错，

原因是"babel-loader": "^8.x.x"版本的问题，与babel-core 6.x.x不兼容，把loader降到7.1.5版本即可解决: npm i -D babel-loader@7.1.5

使用html模板

使用 html-webpack-plugin 插件，webpack 可以根据你的配置生成你想要的文件 html
npm i html-webpack-plugin -D
修改配置文件，添加plugins：

const HTMLPlugin = require('html-webpack-plugin')
······
······
plugins: [
　　new HTMLPlugin({
　　　　filename: 'distTemp.html', //制定的文件，默认
　　　　template: 'template.html' //制定html生成使用的模板文件
　　}) // 生成一个html页面，同时在webpack编译的时候。把我们所生成的entry都注入到这个html页面中,路径都是根据我们output配置的来走的。
]

创建html模板


再执行 npm run build
dist文件夹下就会多一个html文件


开发模式下启动服务器并实时刷新

npm i webpack-dev-server -D
在package.json中script中添加
"dev": "webpack-dev-server --mode development --open",
修改配置文件:
devServer.index一定要和HTMLPlugin.filename一致，否则报错

执行 npm run dev 就会自动打开浏览器了，页面就是模板页面
安装 react 模块
npm i react -D
npm i react-dom -D
修改入口文件，编写react代码，

import React from 'react'
import ReactDom from 'react-dom'
// var React = require('react')
// var ReactDom = require('react-dom')
// 推荐使用import方式(es6标准)，不推荐使用require方式（CommonJS/AMD规范）

let names = ['aa', 'bb']

class Dome extends React.Component{
　　render() {
　　　　return (
　　　　　　<div>
　　　　　　{
　　　　　　　　names.map(function(name) {
　　　　　　　　　　return <div key={name}> Hello { name } </div>
　　　　　　　　})
　　　　　　}
　　　　　　</div>
　　　　)
　　}
}
export default Dome
ReactDom.render(<Dome />, document.getElementById('root'))
保存，运行npm run dev

最后推荐并致谢以下内容

webpack中文文档： https://www.webpackjs.com/concepts/
英文文档（推荐）： https://webpack.js.org/concepts/
几本关于webpack的书：
1、 https://zhaoda.net/webpack-handbook/index.html
2、 http://webpack.wuhaolin.cn/
3、 https://fakefish.github.io/react-webpack-cookbook/Getting-started.html
第二本有弹出购买的遮罩层时，F12，干掉就行了

原文：https://blog.csdn.net/qq_35771567/article/details/83588854 

 

<二>

问题所在

  • 以前总在别人的框架里边填东西，很多东西自己并没有亲自去做，看似简单，实则不然
  • 学新东西时没有趁热打铁去做总结，记录，一段时间过去后，基本忘得差不多了
  • 对于无法理解的东西，可以暂时不深究，但尽量将它记录下来，如何操作，久而久之，多用，自然会理解，否则，很麻烦，比如webpack。

谈谈正事

Es6+React以及webpack打包搭建框架的步骤及部分详解

  1. npm init

  • 此条命令是创建一个npm项目

  • NPM 全称 node package manager， 是 nodejs 的包管理工具，使用它让我们可以更方便的使用别人的代码，以及向别人分享我们的代码。

  • 执行后，npm会引导输入一些基本信息，可以默认按回车键，然后会生成一个package.json文件，包含基本信息，后续的依赖也会保存到它里边。

  • npm install react react-dom --save

  • 安装react和react-dom依赖

  • **npm install webpack webpack-dev-server --save-dev **

  • 安装webpack和webpack-dev-server依赖

  • webpack 是一个模块打包工具

  • 上边所说的模块在这里指js&css&image，有了webpack就可以很方便的打包这三种资源。

  • webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器。

  • npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev

  • 安装babel以及相关的插件

  • Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

至此我们所需要的依赖都安装完毕啦
-------------------------------------分割线----------------------------------------------

代码部分

代码结构图：

 
代码结构

 

  1. 首先创建两个组件，即就是hello和world文件夹中的index.js,分别只用来显示一个“hello”和“world”就好。
  2. 在build文件夹下创建一个入口页面，index.html,去使用上边的两个组件。
  3. webpack配置
  • webpack打包时需要一个入口文件，需要将react组件引到这个入口文件，就是component中的index.js
    index.js:
import Hello from './hello/index.js';
import World from './world/index.js';
  • webpack.config.js的配置
var path = require('path');
var webpack = require('webpack');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(__dirname, './components/index.js');
var BUILD_PATH = path.resolve(__dirname, './build');
module.exports = {
  entry: APP_PATH,
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['babel-loader?presets[]=es2015,presets[]=react']
    }]
  }
}
  • 配置完成后需要最后执行webpack.config.js中的构建任务，在package.json中配置就可以完成
"scripts": {
  "build": "webpack"
}
  • 最后将打包好的文件bundle.js引入到入口页面index.html中，此时去打开index.html就可以看到效果啦
    那如何启动一个静态资源服务器来看到页面呢？？？
  • 此时可以直接在package.json中做修改，用到的是前边安装过的webpack-dev-server
"scripts": {
 "blog": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
}

blog 中各个参数的含义：

  • --webpack-dev-server 在 localhost:8080 建立一个 Web 服务器；
  • --devtool eval 映射编译好的源码，用于调试；
  • --progress 显示代码打包进度；
  • --colors 表示在命令行中显示颜色；
  • --content-base 来指定 server 启动后的内容目录。

执行 npm run blog 启动 server，此时打开 http://localhost:8080 ，即可看到效果。

第一个里程碑结束啦！！！成果在此欢迎吐槽



作者：baiying
链接：https://www.jianshu.com/p/59075306d1e0
来源：简书

posted on 2019-07-03 18:07  寂无声之SPY  阅读(98)  评论(0)    收藏  举报

导航