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(开发模式)。
——内容收集整理于网络