bucky-mix

制作这个工具的主要目的是为了解决webpack在解决图片等静态资源的时候遇到的问题。 如使用 file-loader 的时候，在生成的css文件中，background的文件名与实际 图片的路径不符。导致的404错误。

bucky-mix 的主要想法是：

在使用file-loader来修改css文件的文件名，然后使用自制插件来复制图片等静态资源 保持源码的目录结构与打包后的目录结构一致。

如:

static
|----src
|    |----index
|         |----index.js
|         |----index.css
|         |----imported_by_index_js.js
|
|----dist
|    |----index
|         |----index.js
|         |----index.css

使用方法

使用 cnpm 全局安装，或者在项目中使用 cnpm 安装。

npm install --registry=http://registry.npmjs.lianjia.com:7001/ @lianjia/bucky-mix

然后在src目录下配置 bucky-mix.js作为入口文件。

module.exports = (mix, args) => {
    // 执行 mix对象的js css copy方法
    mix
        .alias()
        .publicPath()
        .js(relativePathToJSFile)
        .css(relativePathTOCSSFile)
        .copy(relativePathToIMGFileOrDirectory)
        .dest(relativePathToDestinationDirectory)
}

mix对象方法解析

bucky-mix.js 文件 export 一个函数，该函数接收两个参数，第一个为mix本身的一个引用？，该对象提供了以下方法：

以下方法都接收一个相对路径的字符串作为参数

除了 dest 方法只能被调用一次之外，其余方法都可多次调用，甚至链式调用

mix.js方法

该方法用来编译js文件

该方法接受相对于当前路径（bucky-mix所在目录）的一个js文件的相对路径。 如bucky-mix.js文件在 /data0/www/htdocs/blog/static/bucky-mix.js， 而其中一个要打包的js文件在 /data0/www/htdocs/blog/static/src/pages/index/index.js， 则应该给js方法传输的参数为./src/pages/index/index.js (即require("path").relative("/data0/www/htdocs/blog/static/", "/data0/www/htdocs/blog/static/src/pages/index/index.js")) PS: 如果入口文件本身有 module.exports = {} 或者 exports.${moduleName} = xxx 或者 export moduleNmae = {} 就会在(必须是一个对象)，这样在打包完成之后 window对象将会挂载一个moduleName的内容

mix.css方法

该方法用来编译less, css, stylu文件

该方法接受相对于当前路径（bucky-mix所在目录）的一个css文件的相对路径。 如bucky-mix.js文件在 /data0/www/htdocs/blog/static/bucky-mix.js， 而其中一个要打包的css文件在 /data0/www/htdocs/blog/static/src/pages/index/index.less， 则应该给js方法传输的参数为./src/pages/index/index.less (即require("path").relative("/data0/www/htdocs/blog/static/", "/data0/www/htdocs/blog/static/src/pages/index/index.less"))

mix.copy方法

该方法用来指定哪些需要复制的文件或目录

该方法接受相对于当前路径（bucky-mix所在目录）的一个文件或路径的相对路径。 如bucky-mix.js文件在 /data0/www/htdocs/blog/static/bucky-mix.js， 而其中一个要打包的img文件在 /data0/www/htdocs/blog/static/src/pages/index/logo.png， 则应该给js方法传输的参数为./src/pages/index/logo.png (即require("path").relative("/data0/www/htdocs/blog/static/", "/data0/www/htdocs/blog/static/src/pages/index/logo.png"))

mix.dest方法

该方法用来指定所有的文件打包之后输出的目录。该方法可以缺省。 假如没有提供该方法，默认路径在当前路径（bucky-mix.js所在目录）下的.mix目录中。

该方法接受相对于当前路径（bucky-mix所在目录）的一个文件或路径的相对路径。 如bucky-mix.js文件在 /data0/www/htdocs/blog/static/bucky-mix.js， 而要输出的目录在，/data0/www/htdocs/blog/static/dist/,则该参数为./dist。 编译成功之后，/data0/www/htdocs/blog/static/src会对应生成到/data0/www/htdocs/blog/static/dist/。

mix.watchIgnore方法

该方法接受一个"只编译一次的文件"，如第三方依赖项。 如react模块，则该模块在第一次被编译之后不会再被编译。这样可以缩短编译时间。

除了静态写由哪些文件需要处理，也可以使用动态去遍历文件生成入口：

const fs = require("fs")
const path = require("path")
module.exports = (mix, args) => {
    // 循环执行 mix 对象 的 js css copy 方法
    fs.readdirSync("srcPath").forEach( (v, i) => {
        mix
            .js("the JS file in the v path")
            .css("the CSS file in the v path")
            .copy("the file or dir want to copy in the v path")
    })
}

当前可能存在的bug：js css文件的path 前面的 ./会被path.join方法去掉。所以在必须的时候需要手动添加"./"

使用额外的模块（如babel-polyfill等）

npm install babel-plyfill 然后在输出的时候加上 mix.js("babel-polyfill")