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(开发模式)。

——内容收集整理于网络

posted @ 2021-05-18 16:27  桃李子  阅读(74)  评论(0编辑  收藏  举报