该文章是建立在已搭建好的环境，对过程进行了解的哈，不做搭建过程详解
一 .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.最后的目录结构
网友评论