webpack搭建自己的项目

使用代理的方式参考地址：http://www.cnblogs.com/wangyongcun/p/7665687.html

npm 常用模块

npm init 创建package.json文件

一值回车

npm install 创建<module-name>文件

npm undate 更新模块

npm uninstall 卸载模块

 

这个就是app/index.js打包成build/build.js

 ---

1. module.exports 初始值为一个空对象 {}
2. exports 是指向的 module.exports 的引用
3. require() 返回的是 module.exports 而不是 exports

webpack命令

打包命令：  webpack app/index.js  build/build.js

app/index.js 是入口文件

build/build.js是打包后的文件

app.js
module.exports="欢迎光临"
在index.js里面使用
var str=require('./app.js');
document.body.innerHTML="<div>"+str+"</div>"
在index.js里面的另一种写法

define(["./app.js"],function(str){
  document.body.innerHTML="<div>"+str+"</div>"
})

 

需要一个css模块加载器

模块加载器（loader）

各种不同文件类型的资源，webpack有对应的模块loader

更多参考：

http://webpack.github.io/docs/using-loader.html

https://webpack.js.org/concepts/loaders/

安装加载器

npm install xxx.loader --save-dev

-------

 使用css需要安装两个loader     css-loader style-loader

index.js加入

var str=require('./app.js');

require("style!css!./css/style.css");//这里的style!css!不能写反，一般这里是从右往左读的
document.body.innerHTML="<div>"+str+"</div>"

引入css

style.css里面
@import "./common.css"

----------------------------------------------------

新建webpack.config.js进行webpack打包文件配置

webpack配置文件说明
module.exports={
　　//
}
entry:打包的入口文件
output:打包结果
　　path:定义输出文件路径
　　filename:指定打包文件名称
module:定义对模块的处理逻辑
　　loaders:定义一系列加载器
　　　　[{
　　　　　　test:正则，匹配的文件后缀名
　　　　　　loader/loaders：string|array处理匹配
　　　　　　include：String|Array包含的文件夹
　　　　　　exclude:String|Array排除的文件夹
　　　　}]
resolve:{
　　extensions:['','.js','.css','jsx']//自动补全识别后缀
}

 配置代码

webpack.config.js配置
module.exports={
  //      
}
module.exports={
    /*入口文件*/
    entry:'./app/index.js',
    /*打包位置*/
    output:{
        /*路径*/
        path:"./build/",
        /*文件名*/
        filename:'build.js',
　　　　　
　　　　　/*publicPath用于索引做到实时变化数据*/

         publicPath:"build/"

    },
    /*模块*/
    modules:{
        /*加载器*/
        loaders:[
            {
                /*正则匹配后缀*/
                test:/.css$/,
                /*加载器*/
                loader:["style","css"]
            }
        ]
    },
    resolve:{
        extensions:['','.js','.css','jsx']//自动补全识别后缀
    }
}

 webpack打包服务器

webpack-dev-server

轻量级服务器，修改文件源码，自动刷新页面就能把修改同步到页面上

安装webpack-dev-server

　　npm install webpack-dev-server -g

　　安装后在命令行使用webpack-dev-server命令

　　依赖写入package.json

　　　　npm install webpack-dev-server --save-dev

然后直接webpack-dev-server运行。。。然后直接localhost:8080就可以直接访问了

自动刷新webpack-dev-server --hot  --in

在webpack.config.js中配置服务

devServer:{}

-------------------

  webpack-dev-server --hot  指令