微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

webpack模块

1.entry

  entry属性用来指定一个入口起点或多个,写法有三种:字符串、对象、数组(一个、多入口、多入口),如下:

module.exports = {
  entry: 'url'  
}

module.exports = {
  entry: {
    app1: 'url1',
    app2: 'url2'
   } 
}

module.exports = {
  entry: ['url1','url2']  
}

2.output

  output属性用来配置打包输出文件包括以下内容

module.exports = {
  entry: {...},
  output: {
    filename: 'js/[name].js', // 文件输出名,添加路径如'js/'
    chunkFilename: 'js/[name].js',
    path:__dirname + '/dist', // 文件输出路径,必须是绝对路径
    publicPath: 'http://...' // 设置打包过程中产生的静态文件的最终引用地址
  }
}

3.loader

  loader让webpack能够处理非js文件,loader可以将所有类型文件转换为webpack能够处理的有效模块。

  loader有两个目标:

    (1)test属性:用于标识出应被对应loader进行转换的某个或某些文件

    (2)use属性:用于标识转换时应该使用哪个loader。

  loader基本配置如下:

module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
}

  webpack常用的loader

    (1)样式:style-loader、css-loader、less-loader、sass-loader

    (2)文件raw-loader、file-loader 、url-loader等

    (3)编译:babel-loader、coffee-loader 、ts-loader等

    (4)校验测试:mocha-loader、jshint-loader 、eslint-loader等

4.plugins

  loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

5.mode

  mode有production(生产模式),development(开发模式)。

——内容收集整理于网络

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐