why?
- 由于前端的各个文件的功能模块组织及依赖的复杂关系，为了简化开发的复杂程度，采用webpack插件，可以将复杂的各个文件组织在一个模块化文件中，节省了大量了事件并且相当利于简化开发及维护
how?
1.初始化环境
- npm init 得到package.json
2.安装webpack
- npm install webpack -g 全局安装
3.安装webpack-dev-server
- 为了webpack需要手动再更新文件，故使用webpack-dev-server组件
- webpack-dev-server会自动监听文件修改，并自动刷新页面。
- 安装 npm i webpack-dev-server-dev-server -D
4.配置package.json
"scripts": { //dev为名，这个可以自定义，--open是默认执行命令后打开主页 ，contentBase是设置主页路径, --hot是将改动的内容作为补丁加入而不是直接更改整个文件，降低能耗 ???"dev": "webpack-dev-server --open --contentBase src --hot" ?},
5.配置webpack.config.js文件
//引入path模块const path = require(‘path‘);//引入html-webpack-plugin模块const htmlWebpackPlugin = require(‘html-webpack-plugin‘);//暴露出口module.exports = {//入口文件地址配置 ???entry: path.join(__dirname, ‘./src/main.js‘),//出口文件配置 ???output:{ ???path: path.join(__dirname,‘./dist‘), ???filename:‘bundle.js‘ ???},//使用html-webpack-plugin实例将HTML文件挂载到内存中 ??plugins:[ ???????new htmlWebpackPlugin({ ???????????template: path.join(__dirname,‘./src/index.html‘),//指定的模板页面 ???????????filename: ‘index.html‘ //指定生成的页面的名称 ???????}) ???],//设置控制相关文件类型的处理组件 ???module:{ ???????rules:[//此处的顺序的是从右至左执行，所以是css-loader基于style-loader，后面两个原理同上 ???????????{test: /\.css$/,use:[‘style-loader‘,‘css-loader‘]}, ???????????{test: /\.less$/,use:[‘style-loader‘,‘css-loader‘,‘less-loader‘]}, ???????????{test: /\.scss$/,use:[‘style-loader‘,‘css-loader‘,‘sass-loader‘]} ???????] ???}}
6.处理相关的文件类型的处理模块都需要npm单独安装
- 处理less文件 npm i less-loader -D
- 此组件需要配合安装 less 使用 npm i less -D
- 处理scss文件 npm i sass-loader -D 【注意：此处是sass而不是文件后缀的scss】
- 此组件需要配合安装node-sass使用 npm i node-sass -D
7.运行
- 由于安装的局部webpack-dev-server,所以此处使用npm 运行
- npm run dev
what?
- webpack运行首先会加载webpack.config.js文件内容，按照配置文件路径解析文件，为了更快的运行文件及降低能耗，并将生成的文件挂载到内存中，所以生成的文件并不是存在物理内存(硬盘)中。
webpack使用
原文地址：https://www.cnblogs.com/damon35868/p/10192942.html