webpack

webpack是一个非常强大的打包工具，可以打包符合标准规范（如CommonJS/AMD）的模块，也可以封装loader来支持其它模块化特性。 nui-loader 就是一个将Nui模块化语法转化为webpack可识别语法的解释器，能让我们在使用Nui模块特性的同时使用webpack进行打包。

本页面内容仅介绍nui-loader的使用，不会对webpack做过多的解释，没接触过的请提前进行了解。

安装

新建一个nui-demo文件夹，目录结构是如下形式：

全局安装webpack：

终端中路径切换到nui-demo目录，然后分别安装webpack、nui-loader、html-webpack-plugin、clean-webpack-plugin：

编辑/src/script/app.js文件，添加如下代码：

编辑/src/script/content.js文件，添加如下代码：

编辑/html/index.html文件，添加如下代码：

编辑webpack.config.js，添加如下代码：

在终端中执行webpack --watch，打开/dist/index.html，页面显示了hello world，修改content.js，页面内容也会及时更新。

webpack和Nui都支持别名，可是使用方式不一样，如果你习惯了Nui框架的别名书写方式，可以通过nui-loader参数进行设置。编辑webpack.config.js，修改module部分如下：

编辑app.js，修改内容如下：

重新执行webpack --watch，页面正常显示内容。

如果你的项目使用了非常多的别名，或者使用gulp-nui的项目迁移到webpack，可以通过url参数将别名配置到一个文件中。项目根目录新建一个config.js，添加内容如下：

编辑webpack.config.js，修改module部分如下：

重新执行webpack --watch，页面正常显示内容。

由于Nui组件中加载样式文件没有添加后缀，因此需配置文件类型加载顺序，less优先。

使用Nui框架编写模块时，4个工厂函数require/imports/extend/renders中除了require，其它三个必须加this.或者module.前缀，否则解释器无法识别。gulp-nui转webpack的要注意。