webpack-entry&output

  webpack是静态模块打包器,可以递归的构建项目的依赖关系图。有4个重要的概念:

  • entry(入口文件)
  • output(出口文件)
  • loaders
  • plugins(插件)

本文首先介绍下entry和output:

entry

项目的入口文件,webpack中的默认值为’./src’,有2种写法:

  • 简写:
    webpack.config.js
//entry: string|Array<string>
const config = {
    entry: path.join(__dirname, 'app/main')
}
//如果想添加互不依赖的多个文件,可使用数组格式
const config = {
    entry: ['app/main.js','aap/other.js']
}
  • 对象写法
const config = {
    entry: {
        app: path.join(__dirname, 'app/main')
    }
}

对象写法可扩展性强,推荐使用,常用的使用场景有:

  • 分离 应用程序(app) 和 第三方库(vendor) 入口
const config = {
    entry: {
        app: path.join(__dirname, 'app/main'),
        vendor:path.join(__dirname, 'app/vendor')
    }
}

  以上这种方式比较常见于只有一个入口起点(不包括 vendor)的单页应用程序中。
  如果在 app 中引用了 vendor,那么需要使用 CommonsChunkPlugin 插件。

  • 多页应用
const config = {
  entry: {
    main: path.join(__dirname, 'app/main'),
    other: path.join(__dirname, 'app/other')
  }
};

多页应用与单页应用的配置基本相似,不同主要在于entry,另外,如果项目中用到了 抽离css样式的插件 extract-text-webpack-plugin,那么还需对这个插件进行改写。
extract-text-webpack-plugin 插件主要是为了抽离css样式,防止将样式打包在 js中引起页面样式加载错乱,多页面应用中,

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const config = {
    entry: {
        main: path.join(__dirname, 'app/main'),
        other: path.join(__dirname, 'app/other')'
    },
    plugins: [
        new ExtractTextPlugin('main/[name].[contenthash].css'),
        new ExtractTextPlugin('other/[name].[contenthash].css')
    ]
}

output

webpack的出口文件,即使存在多个入口文件,也只能指定一个出口文件。

const config = {
  output: {
    filename: '[name].js',
    //webpack4中的path默认值即为'./dist',可不用设置
    path: path.join(__dirname, 'dist')
  }
};
阅读更多

没有更多推荐了,返回首页