时间戳

首页 > 技术文章 > Webpack学习笔记

Webpack学习笔记

xiaoqiyaozou 2020-11-29 19:21 原文

nrm的安装和使用

​ 作用，切换npm镜像包的镜像地址

​ 使用：1.运行 npm i nrm -g 全局安装npm 包

​ 2.使用 nrm ls 查看当前所有可用的镜像源地址以及当前使用的镜像地址

​ 3.使用nrm use 切换不同的镜像地址

webpack

什么是webpack

前端构建工具

webpack 安装

npm i webpack -g

基本的命令

npm init --yes 生成package.json 文件

webpack ./src/main.js -o ./dist/ 打包成浏览器可以识别的语法

通过配置文件设置
const path = require('path');

module.exports={
    entry:path.join(__dirname,'./src/main.js'),//入口表示 文件要打包的路径
    output:{
        path:path.join(__dirname,'./dist'),//指定 打包好的文件  输出到哪个文件中去
        filename:'main.js'
    }
}

webpack-dev-server

开发时监听代码变化 自动打包js得插件

webpack-dev-server 安装

npm i webpack-dev-server -D

配置命令
package.json 配置
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack-dev-server" //简配版
 }

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  } //自动打开浏览器 设置端口 内容入口 热更新
webpack.config.js 配置
const path = require('path');

const webpack = require('webpack');//热更新1
module.exports={
    entry:path.join(__dirname,'./src/main.js'),//入口表示 文件要打包的路径
    output:{
        path:path.join(__dirname,'./dist'),//指定 打包好的文件  输出到哪个文件中去
        filename:'main.js'
    },
    devServer:{
        open:true,
        port:5000,
        contentBase:'src',
        hot:true //热更新2
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),//热更新3
    ]
}

html-webpack-plugin

开发时自动打包html的插件

安装

npm i html-webpack-plugin -D

webpack.config.js 配置
const htmlWebpackPlugin = require('html-webpack-plugin') //引用模块
	
  	plugins:[
        new webpack.HotModuleReplacementPlugin(),//热更新3
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),//指定得模板页
            filename:'index.html'
        })//将html 放到内存中
    ]

样式模块管理

处理css文件，less文件 （scss 同理）

安装打包插件 npm i style-loader css-loader -D

npm i less less-loader -D

webpack.config.js 配置module
   module:{
        rules:[{
            test:/\.css$/,use:['style-loader','css-loader'] //loader 调用顺序从右到左
        }，
         {
            test:/\.less$/,use:['style-loader','css-loader','less-loader']
        }]
    }

Babel

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i bable-preset-env babel-preset-statge-0 -D
{test:/\.js$/,use:['babel-loader','exclude:/node_moudle']}

出现的问题

问题1 webpack webpack-cli webpack-dev-server 安装了也无法正常使用
//由于版本之间的问题 会出现命令无法正常使用的情况
//可以使用的版本
 "devDependencies": {
    "webpack": "^5.1.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }

推荐阅读