webpack

1.概念

1.1入口

入口起点(entrypoint)指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始，每个依赖项随即被处理，最后输出到称之为bundles的文件中

1.2出口(output)

output属性告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为./dist

1.3loader

loader让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对它们进行处理

必须定义在modulerules里

1.4插件(plugins)

loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量

1.5模式

通过选择development或production之中的一个，来设置mode参数，你可以启用相应模式下的webpack内置的优化

module.exports={

mode:'production'

};

2.入口

单个入口，对象语法，分离，多页面

constconfig={

entry:{

app:'./src/app.js',

vendors:'./src/vendors.js'

}

};

constconfig={

entry:{

pageOne:'./src/pageOne/index.js',

pageTwo:'./src/pageTwo/index.js',

pageThree:'./src/pageThree/index.js'

}

};

3.输出

如果配置创建了多个单独的"chunk"，则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

{

entry:{

app:'./src/app.js',

search:'./src/search.js'

},

output:{

filename:'[name].js',

path:__dirname+'/dist'

}

}

4.模式区别

选项描述

development：会将process.env.NODE_ENV的值设为development。启用NamedChunksPlugin和NamedModulesPlugin。

production：会将process.env.NODE_ENV的值设为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和UglifyJsPlugin.

5.loader

loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或将内联图像转换为dataURL。loader甚至允许你直接在JavaScript模块中importCSS文件！

webpack.config.js

配置方式

module.exports={

module:{

rules:[

{test:/\.css$/,use:'css-loader'},

{test:/\.ts$/,use:'ts-loader'}

]

}

};

5.1内联

importStylesfrom'style-loader!css-loader?modules!./styles.css';

5.2CLI

webpack--module-bindjade-loader--module-bind'css=style-loader!css-loader'

6.什么是webpack模块

import,require,define,

7.模块解析规则