webpack的简单使用

什么是webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：
入口(entry)
输出(output)
loader
插件(plugins)

怎样在项目中使用webpack

首先安装webpack和webpack脚手架

npm i webpack -g
 npm i webpack-cli -g 

或者在项目中安装

npm i webpack --save
npm i webpack-cli --save

两种模式roduction模式下会启用UglifyJsPlugin插件（移除未使用的内容和文件压缩），分别用production和development打包，编译的区别：

1.development打包后，一些没有依赖的方法 变量 文件会保留，production则会移除。

2.production打包后，代码会进行压缩，比development的文件小。

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

默认的入口文件是  src/index.js`在这里插入代码片`
 默认的出口文件是  dist/main.js

一些重要的插件

npm i html-webpack-plugin

自动根据html模板生成一个html文件,
自动引入就打包后的js

npm i  clean-webpack-plugin

清理dist中打包后的文件

loader

除了js文件，其他文件打包都需要loader

npm i css style-loader css-loader 

在webpack.config.js进行配置
{
test: /.css$/,
use: [‘style-loader’,‘css-loader’]
}

图片打包引入两个loader

npm i file-loader url-loader

webpack实现热更新

npm i webpack-dev-server --save

在webpack.config.js中配置

 devServer:{
        		inline:true 热更新
    		}

在package.json 中配置

 “start“：”webpack -w  --progress --open“

好了，webpack的基础配置就是这些了，快去动手试试吧！