webpack

概念

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

入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

cnpm i html-webpack-plugin -D 入口页面插件

出口(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

loader (中间件)

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

插件(plugins)

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

cnpm install webpack webpack-cli --save-dev webpack 模块安装

npx webpack --config webpack.config.js 创建配置文件
npm install --save lodash lodash插件
cnpm install jquery -S jq插件
npm run build 跑动项目

cnpm install raw-loader loader插件 3.1.0 raw-loader
cnpm install --save-dev style-loader css-loader -D css样式插件 style-loader 1.0.0
cnpm install --save-dev file-loader 文件 file-loader 4.2.0

cnpm install less less-loader --save-dev lass 文件配置

cnpm install clean-webpack-plugin --save-dev 配置插件


cnpm install --save-dev webpack-dev-server webpack-dev-server 服务器插件

单页面配置环境搭建

 
 //webpack打包 和wepack命令行工具

 cnpm install webpack webpack-cli -D

 //加载.css扩展名模块

 cnpm install style-loader  css-loader -D


 //加载图片或者字体等文件  大文件
 cnpm install file-loader -D

 //加载图片或者字体等文件  转码小文件
 cnpm install url-loader -D

 //加载模块化css
 cnpm install less less-loader -D

 //单页面首页模板配置插件
 cnpm install html-webpack-plugin -D

 //web服务器（热更新）
 cnpm install webpack-dev-server -D

npm init -y 初始化安装
npx webpack 添加文件夹 npx webpack --config ./config