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直接引用就可以了，图解可看上文。