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

 ---

module.exports 初始值为一个空对象 {}

exports 是指向的 module.exports 的引用

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  指令

转载于:https://www.cnblogs.com/zhihou/p/7864954.html

总结

以上是生活随笔为你收集整理的webpack搭建自己的项目的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。