11月13, 2017

关于webpack配置中的各种路径含义

都在代码里,在注释里了。

下方总结了3种不同地方的路径:webpack, HtmlWebpackPlugin, webpack-dev-server。 它们之间有联系,但也有不同,极容易搞混。

  • 在使用HtmlWebpackPlugin来对打包资源进行处理时,需要注意资源的路径,源码里进行判断的逻辑比较复杂。

    建议使用HtmlWebpackPlugin自身暴露出来的过程接口进行截获处理。

  • webpack-dev-server中的publicPath可以认为是与webpack中完全不同的含义。

module.exports = {
  entry: {
    index: path.join(srcDir, 'index'+'.js'),
    report: path.join(srcDir, 'report.js'),
    //hjl: 需要配合下面的CommonsChunkPlugin才能把库文件从index中分类出来
    vendor: ["vue", "vue-router", "axios"]
  },
  /*
   1. output.path: 打包文件输出的目录,默认值和context 的默认值一样,都是process.cwd()
   建议配置为绝对路径(但相对路径也不会报错)
   2. output.publicPath,默认值为空字符串
   静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径(比如某个loader的options选项中的outputPath的值)
   3. filename: 打包之后entry输出的位置,也可以配路径cc/[filename].js
  */
  /*
    在production下会输出:
    webpack.config.js
    dest/www/static/
      cc
        index.js
        reprot.js
        styles.css,其中图片地址http://www.test.com/23d21fafa7237fd62975b732e6007ac5.png
        vendor.js
  */
    output: {
     path: path.resolve(__dirname, "dest", "www/static"),
     publicPath: process.env.NODE_ENV === 'production' ? "http://www.test.com/" : "/build/",
     filename: 'cc/[name].js',
    },
}

 /*
  1. filename的路径是相对于 output.path, 默认是index.html【源码可查】
  如果不设置filename, index.html
  2. template的路径是相对于 output.context, 【源码可查】
  如果不设置,取插件内部模板 path.join(__dirname, 'default_index.ejs')【源码可查】
*/
/*
    如下输出:
    webpack.config.js
    dest/www/static/
    dest/www/aa/
            test111.html
    index.html(这是由第二个HtmlWebpackPlugin生成的)
*/
new HtmlWebpackPlugin({
  filename: '../aa/test111.html',
  template: path.join(__dirname, 'tpl_demo.html'),
  inject: true,
  chunks: ['vendor', 'index']
}),
new HtmlWebpackPlugin({
  inject: true,
  chunks: ['vendor', 'report']
})


module.exports.devServer = {
  inline: true,
  hot: true,
  proxy: [{
    path: '/api/*',
    target: 'http://127.0.0.1:3000',
    secure: false
  }],
  historyApiFallback: true,

  /*
  1. contentBase:dev-server这个服务从哪儿开始启动,查找入口文件index.html
  2. webpack中设置的publicPath,是说dev-server在内存中生成的文件路径是什么。
  */

  /*
    比如:在开发模式下,启动webpack-dev-server之后,
    会先在与启动命令平级的目录下查找/test/index.html
    在index.html中使用打包的静态资源<link rel="stylesheet" href="/build/styles.css">
  */
  contentBase: './test/',
}

本文链接:https://imjiaolong.cn/post/webpack-path.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。