webpack搭建自己的项目

最新推荐文章于 2022-07-28 00:53:29 发布

转载最新推荐文章于 2022-07-28 00:53:29 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhihou/p/7864954.html

文章标签：

#webpack #json #ViewUI

本文介绍Webpack的基本使用方法，包括创建package.json文件、安装和更新模块等。详细解释如何通过Webpack进行项目打包，并配置加载器来处理不同的文件类型，如CSS。此外还介绍了如何使用webpack-dev-server实现自动刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用代理的方式参考地址：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']//自动补全识别后缀
    }
}