react项目webpack搭建过程理解

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

一 .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.最后的目录结构