webpack的使用(前方多图预警)

最近因为需求那里反馈各种系统各种卡,各种不顺畅,经各种商量之后,因为之前项目是用seajs来设计的,改成webpack也比较“兼容”,所以就决定尝试用webpack工具来打包一下,来优化一下前端。原理就不多说,百度已经很多了,经历了各种坑以后,总结一下自己项目的使用过程。如有不对的地方,请不吝赐教吐舌头

首先要先下载nodejs: https://nodejs.org/en/

然后就要安装和配置webpack了。官网是:https://webpack.github.io/;通过指令全局安装:npm install webpack –g,再安装一下文件的加载器分别为:npm install css-loader --save-dev     npm install file-loader --save-dev    npm install style-loader --save-dev  npm install url-loader --save-dev。

我的开发工具是Visual Studio ,我就以VS为例,为了简单方便确定文件的位置,在开发工具里添加cmd,步骤如下:

(1)首先打开项目,在菜单栏上选择工具—外部工具,然后创建cmd,如下图:(命令栏填cmd程序的位置,初始目录选择‘项目录’。)


(2)每个项目下都必须配置有一个 webpack.config.js,告诉 webpack 它需要做什么,具体文件内容如下:

module.exports = {
    entry: {
        index: ['./index.js'],
    },
    output: {
        path: './[hash]',
        filename: '[name].bundle.js'
    },
    module: {
        loaders: [
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        { test: /\.scss$/, loader: 'style!css!sass?sourceMap' },
        { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=0' },
        ]
    },
    
}


这里具体解释一下:

对Webpack的打包行为做了配置,主要分为几个部分:

entry 是页面入口文件配置;

output 是对应输出项配置(即文件最终要生成什么名字的文件、存放到哪里)该段代码最终会生成一个Index.bundle.js并存放到 ./Scripts/SenderInfo/ 文件夹下;

[hash]的作用是解决js或者css等文件的缓存问题,不同的hash代码有不同的文件夹,如下图所示:


module.loaders它告知 webpack 每一种文件都需要使用什么加载器来处理.

至于模块的写法,还是按照原来seajs的写法,如下图:




把原先html页面引用的文件都require进来,如下图:



(3)选中项目中的js文件,在菜单栏中打开工具—cmd,将其打包,(指令为webpack -d -p),下面三幅图分别解释他们各自的作用:


Webpack 来执行一次开发的编译;



webpack -p 来针对发布环境编译(压缩代码);



webpack -d 来生成 SourceMaps,方便开发者查看和检查脚本;

打包出来的效果在项目里就是这样的:


然后在页面里面引用,就可以显示出来了:


这样一个简单的webpack打包就完成啦!!大笑大笑大笑为此我特地做了个简单的demo。方便下次用的时候一看就懂。下面我就贴一下我的demo

---------------------------------------------我是可爱的分割线----------------------------------------------------------------

以一个简单的easyui的Hover Tabs为demo,js的效果是鼠标停在某个选项卡上,就会自动切换,在第二个选项卡中,有个点击弹出提示框事件。

第一步先把easyui所需要的文件引入进来,并创建easyuiTab.html、Tab.js、fistTab.js、webpack.config.js三个文件。如下图所示:


第二步在四个文件中添加代码,分别是:





第三步,点击菜单栏中的工具—cmd,进行打包



打包完,在文件目录中可以看到生成的文件夹和index.bundel.js文件


第四步,在页面中引入index.bundle.js


最后,就可以在浏览器中正常显示demo。




-----------------------------------------我是可爱的分割线----------------------------------------------

过了几天,发现同组的同事并不是很了解该怎么修改js文件,觉得每改动一次,就要重新打包一下很麻烦,我学习了一下,发现使用--watch就可以自动修改完打包,具体步骤如下:

修改已经完成的脚本,不用每保存一次,手动打包,只要先把原先的webpack.config文件中的[hash]去掉,如下图:



在要修改的脚本上进行修改,打包的时候代码为下图所示:


每修改一次脚本保存,他会自动的打包,直到修改完最终版本。

页面的链接改为:


就可以浏览修改的后效果。

确定全部修改完毕后,再进行打包,把webpack.config文件的[hash]加上,然后cmd里输入webpack –d –p,这时候就会出现带有hash码的文件夹,html直接引用就可以了,图解可看上文。


评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值