webpack使用

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 -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.处理CSS相关的文件类型的模块都需要npm单独安装

  - 安装底部样式处理模块  npm i style-loader css-loader -D

  - 处理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是基于Node.js的，所以兼容node语法，使用require方式引入模块