webpack使用

Posted 2021-01-30 damon35868

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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-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文件内容，按照配置文件路径解析文件，为了更快的运行文件及降低能耗，并将生成的文件挂载到内存中，所以生成的文件并不是存在物理内存(硬盘)中。

dev [dev] 详细X

基本翻译