webpack基础理解以及使用搭建

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