react项目webpack搭建过程理解

作者 : 开心源码 本文共1539个字,预计阅读时间需要4分钟 发布时间: 2022-05-11 共66人阅读

该文章是建立在已搭建好的环境,对过程进行理解的哈,不做搭建过程详解

一 .WebPack

webpack是一个前台资源加载/打包工具,前台的常使用的资源都能作为一个板块导出,我们在代码中直接引使用就可,最后按照我们的配置把代码打包整合起来

webpack的配置说明

var path=require(‘path’);

module.exports = {

? ? entry: ‘./entry.js’,? ? ? ? ? ?//webpack 从入口文件开始,分析所有的依赖,而后将所有依赖整合 ????????????????????????????????????????//? ?到一起打成一个包

? ? output:{? ? ? ? ? ? ? ? ? ? ?//output是最后我们将打好包的文件放在什么位置,打包后的文件名

? ? ? ? path:__dirname+’./dist’,

? ? ? ? filename:’bundle.js’,

????},

//loaders webpack能导入前台的资源,比方说css

? ? module:{

? ? ? ? loaders:[

? ? ? ? ? ? {test:/\.csss/, loader:”style!css” },

? ? ? ? ? ? {test:/\.js|jsx$/,loader:[‘babel’] }

? ? ? ? ]

????}

}

环境调试步骤(node.js python 需要提前下好,由于node.js中含有npm令,能帮我们后面下载我们所需要的包)

1.npm init? ? //创立package.json 对我们项目的一个简单说明 后续所有的依赖也是升级到该文件当中

ERR:Unexpected end of JSON input while parsing near? 能使用npm cache clean –force处理

npm install 会自动去找package.json的所有依赖而后全装

webpack.json

{

? “name”: “reactplayer”,

? “version”: “1.0.0”,

? “description”: “music player”,

? “main”: “app/index.js”,

? “scripts”: {

? ? “test”: “echo \”Error: no test specified\” && exit 1″

? },

? “keywords”: [

? ? “music”

? ],

? “author”: “wy”,

? “license”: “ISC”,

? “devDependencies”: {

? ? “autoprefixer”: “^8.6.3”,

? ? “babel-loader”: “^7.1.4”,

? ? “babel-plugin-react-transform”: “^3.0.0”,

? ? “babel-preset-es2015”: “^6.24.1”,

? ? “babel-preset-react”: “^6.24.1”,

? ? “css-loader”: “^0.28.11”,

? ? “extract-text-webpack-plugin”: “^3.0.2”,

? ? “html-webpack-plugin”: “^3.2.0”,

? ? “json-loader”: “^0.5.7”,

? ? “less”: “^3.0.4”,

? ? “less-loader”: “^4.1.0”,

? ? “react”: “^16.4.1”,

? ? “react-dom”: “^16.4.1”,

? ? “react-hot-loader”: “^4.3.3”,

? ? “react-router-dom”: “^4.3.1”,

? ? “style-loader”: “^0.21.0”

? }

}

2.webpack-dev-server是一个基于node的服务器,他能为webpack打包的文件提供一个web的服务

3.最后的目录结构

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » react项目webpack搭建过程理解

发表回复