标签：middle position highlight containe sim 需要 simple isp 原理
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文件内容，按照配置文件路径解析文件，为了更快的运行文件及降低能耗，并将生成的文件挂载到内存中，所以生成的文件并不是存在物理内存(硬盘)中。
标签：middle position highlight containe sim 需要 simple isp 原理
原文地址：https://www.cnblogs.com/damon35868/p/10192942.html
