1.webpack 是一个前端资源加载/打包工具,前端的常用资源都可以作为一个模板导出,我们在代码中直接引用即可,最后把我们的代码打包整合起来。
前端资源,包括(js,css,图片,模块)等。
下面是一个webpack的配置说明:
1 module.exports ={ // webpack配置说明 2 entry:'./entry.js', // 入口文件 3 output:{ // 告诉webpack,生成的文件放在什么地方 4 path:'./dist', // 文件夹位置 5 filename:'bundle.js' // 文件名 6 }, 7 module:{ 8 loaders:[ // 进行对css导入 ,jsx是react的语法 9 { test:/\.css$/,loader:"style!css"} 10 { test:/\.js|jsx$/,loaders:['babel']} 11 ] 12 } 13 }
判断是不是安装了node.js
node.js官方网址:http://nodejs.org/
输入 npm init
E:\react-music-player>npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (react-music-player) //名字敲回车
version: (1.0.0)
description: music player build
entry point: (index.js) //输入文件
entry point: (index.js) app/index.js
test command: //测试案例
git repository: //是否放在git上git地址
keywords: webpack react music-player
author: estelle
license: (ISC) MIT
About to write to E:\react-music-player\package.json:
{
"name": "react-music-player",
"version": "1.0.0",
"description": "music player build",
"main": "app/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack",
"react",
"music-player"
],
"author": "estelle",
"license": "MIT"
}
Is this ok? (yes) yes
增加依赖模块,比如依赖于react :npm install react --save