webpack配置文件中的输入输出文件路径

问题

1. 如何指定生成的js文件的安放目录？
2. 如何指定生成的css文件的安放目录？
3. 如何指定生成的html文件的安放目录？
4. 如何指定html以及css中引用的图片和字库文件的安放目录？
5. 图片及字库文件和如何被引用？

前提

目标读者:

1. 你已经知道webpack的作用，或者大概知道其作用。
2. 你已经知道如何使用loader或plugin对图片，css文件，js文件等相关文件进行处理
3. 你为webpack生成的文件及其相互引用的配置感到纠结。

输入文件的根

配置中，使用到的原始输入文件，一般都是以webpack.config.js所在的目录为相对根目录

输出文件的根

output属性的一般定义方式为：

output: {
    path: resolve(__dirname, 'dist'),　//dist为你指定的输出目录
    filename: '[name].js?[chunkhash]',
    chunkFilename: '[id].js?[chunkhash]'
  },

在webpack.config.js中output属性定义了入口文件的输出位置。output.path属性定义了webpack输出的根目录！！！以后的所有目录，都以此目录为起点，可以把这个目录类比为Ｌｉｎｕｘ的根。

entry属性

entry:{
    '/js/login/index': './login/register.js'，
    '/js/office/index': './office/portal.js',
    '/js/index': './index.js'
    ....
}

在webpack.config.js中，entry属性定义了webpack要处理的文件的入口。

一般entry的值是一个js基本值对象。entry条目的key会在配置文件中以[name]的形式被多次引用，作为文件名称的一部分使用，key的字符串中可以出现目录斜杠，代表对目录结构描述。

回答问题１: 如何指定生成js文件的安放目录？

entry 中，条目的value定义了使用的入口js文件（这些js文件是webpack的输入，其相对根为webpack.conf.js所在的位置），条目的key定义了入口文件的[name], 该[name]在output属性中被引用。

output的一般格式：

    output:{
     path: resolve(__dirname, 'dist'), //定义了输出的根,
    filename: '[name].js?[chunkhash]',　//[name]是对entry中条目key的引用
    chunkFilename: '[id].js?[chunkhash]'
    }

输出的js文件的安放目录为：path+filename=__dirname+/dist/+[name].js

假设entry中的条目的为：

'/js/login/index': './login/register.js'

则webpack对入口js文件处理后的输出的文件为：

__dirname/dist/js/login/index.js

回答问题２：如何指定生成css文件的安放目录？

extract-text-webpack-plugin插件可以抽取入口js文件中引用的css文件，或vue中定义的style。

在使用该插件时，指定:

filename: '[name].css'

此处的[name]即entry中的条目key,　我们已经知道输出文件的相对根为output.path,

假设[name]='/js/login/index',

则css文件的输出位置为：

output.path/js/login/index.css

若需要把生成的文件归入某目录,假设目录为assets：

filename: 'assets[name].css' //assets后不能有目录斜杠，因为name已经定义了前导斜杠

则css文件的输出位置为：

output.path/assets/js/login/index.css

回答问题３：如何指定生成html文件的安放目录？

html-webpack-plugin插件，根据指定的输入模板，输出对应的html文件，使用该插件的参数一般格式为：

{
      template: './login/index.html' , //输入文件的相对根目录为webpack.config.js所在的目录
      filename:'login/regist.html',//相对于output.path

      chunks: ["entry_key1","enrty_key2",'entry_key3',..]//该html使用到的js, 以entry中条目的key的方式标示
    }

html文件的输出位置由filename属性定义。

回答问题4: 如何指定html以及css中引用的图片和字库文件的安放目录？

使用url-loader对css文件，或者vue模板文件，中引用的图片，或字体文件进行处理。配置的一般方式为：

//处理图片    
 {
      test: /\.(png|jpg|jpeg|gif)(\?.+)?$/,
      use: [{
        loader: 'url-loader',
        options: {
          limit: 10000,
          //name:'assets/images/[name].[hash:8].[ext]',
          name:'[name].[hash:8].[ext]',
          publicPath:'/assets/images/',　//定义在生成的css文件中引用字体文件的位置
          outputPath:'assets/images/'　 //定义字体文件的输出位置,相对于 output.path
        }
      }]
    },
//处理字体
    {
      test: /\.(eot|svg|ttf|woff|svgz)(\?.+)?$/,
      use: [{
        loader: 'url-loader',
        options: {
          limit: 10000,
          name:'[name].[hash:8].[ext]',
          publicPath:'/assets/fonts/', //定义在生成的css文件中引用字体文件的位置
          outputPath:'assets/fonts/', //定义字体文件的输出位置,相对于 output.path
          useRelativePath:false
        }
      }]
    }

outputPath定义了相应文件的输出安放目录。

回答问题５：图片及字库文件和如何被引用？

一般，html中或者css中，引用图片或者字体文件时，其相对根目录为html或css文件所在的位置。

比如：a.css 中　对f.woff文件的引用为：

src:url(f.woff)

若url-loader输出的的图片或字体文件，比如f.woff不和a.css在一个目录下，

其输出位置，通过

 outputPath:'assets/fonts/'

定义在output.path/assets/fonts/目录下。此时，需要定义

publicPath:'/assets/fonts/'

指定a.css对f.woff的引用为：

src:url(/assets/fonts/f.woff)

最后:　output.chunkFilename 是干嘛的？

output.filename属性：指webpack根据entry中的入口js文件抽取生成的打包后js文件的文件名，一般这些文件都是同步加载的。

output.chunkFilename属性：定义了webpack打包的按需异步加载的js文件的文件名，webpack通过扫描入口源代码自动抽取生成对应的文件。一般用在import(xx.js).then 或　require.ensure上下文中。若是待加载的文件已经在其他地方同步加载，则不会按 chunkFilename生成文件了。

最后的最后

由于本例子中输出的相对根为：__dirname+/dist/ 目录，因此在package.json中需要对script部分做以下改动：

"scripts":{
"dev": webpack-dev-server **--content-base ./dist** ....
"build": ...
}

否则，npm run dev时，会找不到对应的js,css文件。