webpack简介

目录

1. webpack是什么,有哪些同类工具

   1. webpack项目打包工具,项目构建工具,有什么作用
   • 构建单页应用(disk) npm i http-server -g
   • 代码压缩
   • (2) 同类工具
   • 百度fis3 ， grunt， gulp
   2. webpack最大的特点
      1. 一切皆模块

2. webpack安装

   • 安装node(node提供了npm)
   • 设置淘宝镜像: nodejs的模块(插件)存放在网站,https://www.npmjs.com,淘宝镜像会同步该网站的模块 设置方法: npm config set registry http://registry.npm.taobao.org/
   • 文档地址: https://www.webpackjs.com

npm i webpack -g (-g全局安装, --save-dev安装到本目录)
npm i webpack-cli -g

ps: 有时打包的时候提示xxx not fund 解决方案:

2.1 ps: 有时打包的时候提示xxx not fund 解决方案:
方法一: 安装缺的模块 npm i xxx --save-dev
方法二: 把webpack和webpack-cli卸载后重装,有时它们出问题了,丢失了某些东西
卸载方法 npm uninstall webpack -g npm uninstall webpack-cli -g

3. nodejs模块系统

   导出 ：module.exports

m1.js  const cat = {  age: 2,  name: '白猫'  }  module.exports = cat;

导入 require('文件路径')

index.js  const aa = require('./cat.js');  consoe.log(aa.name);

打开命令提示父,进入index.js所在目录,运行node index.js 看是否打印出"白猫"

webpack的核心概念

webpack的核心概念有四个: 入口和出口, 模式, loader, 插件

1. 入口和出口(输出) demo1

   • 新建一个文件夹
   • 初始化package.json npm init -y
   • 新建webpack.config.js文件(固定的),配置入口和出口
   • 入口: 项目从哪里开始打包,打包的过程中,把相关的文件全部打成一个包, ps:入口文件通常叫main.js
   • 出口: 打包完成之后,文件名叫什么,放到哪里
   • 在项目的目录运行打包命令 webpack

2. 模式(环境) mode配置(详细请看webpack文档) demo1

   1. mode: 'development' 开发环境
   2. mode: 'production' 生产环境

//配置入口和出口
// 导入path模块,path是nodejs自带的模块,作用是用来处理路径相关的事情
const path = require('path');
const config = {
    // 配置入口文件,告诉webpack从哪里开始打包
    entry: './main.js',
    // 配置出口,output是输出的意思
    output: {
        // 配置输出的路径
        //  __dirname是当前目录的意思,打包好的文件放在当前目录的dist文件夹内
        path: path.resolve(__dirname, 'dist'), 
        // 打包后的js文件名称
        filename: 'laohu.js'
    },
    // 模式配置(环境配置) development代码不压缩,production代码会被压缩
    mode: 'production'
};
// 导出配置
module.exports = config;

3. loader 加载器(解释器)

   • 在webpak世界里,一切皆模块
   • webpack默认只认识js模块,其它的模块都需要相应的loader来解析(解释)
   • 配置css-loader(步骤)
     1. 新建demo2
     2. 初始化package.json
     3. 配置入口和出口
     4. 配置css-loader
     • 在npmjs.com找到css-loader,安装上面的说明进行配置
     • 配置好之后,执行打包命令
     • 新建一个html文件把打包出来的js文件放进去html运行检查效果
     • 注: css-loader依赖style-loader,所以要安装style-loader npm i style-loader --save-dev
   • 配置less-loader
   • 配置方法类似css-loader
   • 错误信息 You may need an appropriate loader to handle this file type 你需要配置一个合适的loader

 // 配置css-loader
 const path = require('path');
 // 导出配置
 module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'laohu.js'
    },
    mode: 'development',
    // 模块配置: 配置loader
    module: {
        // rules规则
        rules: [
          {
            // css-loader的配置
            // 告诉webpack,当它碰到以css结尾的文件时,用style-loader和css-loader先处理一下
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
          }
        ]
      }
 }

4. plugins 插件 demo3

   • html插件 html-webpack-plugin
   • 安装 npm i html-webpack-plugin --save-dev
   • 导入html-webpack-plugin模块
   • 配置(webpack文档)
   • 踩坑: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' 解决方案 npm link webpack --save-dev

   • webpack.DefinePlugin 配置全局变量

     
     image.png

5. alias别名配置(为什么@能代替src)

6. dev-server

   • 安装 npm i webpack-dev-server -g
   • 配置htmlWebpackPlugin
   • 配置devServer
   • 运行命令 webpack-dev-server
   • npm run dev(或者npm run start是怎么来的)