webpack基础配置

webpack 被称为 模块的打包机

webpack核心概念

入口entry

入口起点（entry point）指示webpack应该使用哪个模块，来作为构建其内部依赖的开始

出口output

output属性告诉webpack在哪里输出它所建的bundle([ˈbʌndl]   包)以及如何命名这些文件

loader 

loader让webpack能够去处理其他类型的文件,并将它们转换成有效模块

plugin(插件)

loader用于转换某些类型的模块,而插件则可以用于执行更广泛的任务

例如打包的优化 资源的管理  注入环境变量

mode(模式)

通过选择development(开发), production（生产）或none中的一个来设置mode参数

 

首先在项目中初始化package.json    npm init

package name: (imooc-webpack)  默认名称

version: (1.0.0)  当前版本

entry point: (index.js)  入口名称

test command:   默认

git repository: git资源地址

keywords:   关键字

author:  作者

npm init  -y  默认生成package文件

webpack 有2种安装方式   一种是项目安装  一种是全局安装

npm i  webpack -g   全局安装  但是不建议全局安装  版本固定  不利于  开发版版本不一样的项目 

npm i webpack webpack-cli webpack-dev-server --save-dev   (在开发环境下安装使用--save-dev     dev(development))

然后在devDependencies会看到webpack的版本

然后我们会发现在文件中会多出几个文件   package-lock   是npm 新版本中推出的一个功能会锁定当前项目中包的版本

npx 调用项目内部安装的模块

npx webpack 打包      如果没有配置output   会生成一个dist文件夹 里面有个main.js文件

但是在我们的项目中是html 结合 js 文件开发的   所以需要下载插件

npm i html-webpack-plugin --save-dev

npm i html-webpack-plugin -D   简写形式

这个时候再次执行 npx webpack 会发现在 dist文件夹下 有index.html文件

在index.html 会发现 已经引入了index.js文件

webpack强大之处在于能够帮我们在index.html引入外部的资源文件不需要我们手动的一个个去引入    （！+ tab键会生成一个html模版）

我们有的时候需要有的文件不需要webpack打包   这个时候需要下载  另外一个 插件  copy-webpack-plugin  

npm install copy-webpack-plugin --save-dev

效果图如下所示：