【webpack】快速笔记1 -- 快速搭建属于自己的weback

最新推荐文章于 2024-04-22 09:35:58 发布

@Umbrella

最新推荐文章于 2024-04-22 09:35:58 发布

阅读量250

点赞数

分类专栏：【webpack】文章标签： webpack搭建

本文链接：https://blog.csdn.net/Umbrella_Um/article/details/100027659

版权

【webpack】专栏收录该内容

28 篇文章 2 订阅

订阅专栏

定义

webpack基于node搭建

先安装node，最新版（不是指测试版）+ webpack最新内部可以优化打包速度

node 10.13.0 npm 6.4.1左右

安装命令

npm init <webpack project name>  // 生成一个含有package.json的文件夹

npm install webpack-cli webpack -g/--save -dev  // 建议使用 --save-dev

webpack -v / webpack-cli -v  //查看版本号

npx webpack index.js  // 选择需要打包

此时文件夹生成了一个dist文件夹，里面就是打包好的main.js
（此时呢就把打包好的js在入口文件里引入就行）

对应ES6语法（ES Moudule语法）

    import Header from './common/header.js'  
    export dafault Header

对应CommonJS语法

var Header = require('./common/header.js')
module.exports = Header

结论： webpack是一个js代码翻译器？

真相

webpack官网： https://webpack.js.org/

正确的结论：webpack算不上一个’专业’的js打包工具，官网将其定义为是一个模块打包工具

webpack is a module bundler

webpack现在不仅可以对js模块打包工具发展到-> css / 图片进行打包…

webpack识别的规范：

ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句
样式(url(…))或 HTML 文件()中的图片链接

好了，啃读文档：
moudule介绍：https://webpack.docschina.org/concepts/modules/
模块方法与变量：https://webpack.docschina.org/api/module-methods/

跟着做

npm init  /  npm init -yes/-y （这个是直接默认配置，直接生成）

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

↓ ↓ ↓

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {},
  "author": "Um",
  "license": "ISC"
}

npm isatall webpack webpack-cli -g

webpack@4.39.2
webpack-cli@3.3.7

说一下全局安装-g的弊 => 如果之前有全局安装过webpack的话，并且之前webpack3打包过的项目，此时为4的话可能就运行不了之前打包的，所以只能卸载这个4的打包，安装回3进行运行；但是这样不是很麻烦，不能停步在以前，所以我们最好不要使用-g进行全局的安装，应该在项目中进行–save-dev开发环境的安装

先卸载掉全局的webpack wepack-cli

npm uninstall webpack webpack-cli -g

进入创建node规范的项目，输入：

npm install webpack webpack-cli --save-dev

多出了package-lock.json和node_modules

技巧：
使用webpack -v是查不到webpack的版本号
此时可以通过npx webpack -v可以解决查找node_module项目中安装的插件库

命令行技巧：
查看某插件库的版本信息npm info webpack，这样就可以查看webpack这个库的历史版本信息

如何真正配置webpack（最基本）

告诉webpack如何去对项目进行打包？那怎么做？
首先一开始是没有对webpack进行配置的文件的，之前的步骤都是使用webpack默认配置去打包；
那我们新建一个配置webpack.config.js来对webpack做基本的配置

const path = require('path')

module.exports = {
   entry: './index.js',
    output: { 
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'bundle')
    }
}

参数解释：
entry：入口文件，通俗说就是告诉webpack从哪个文件进行打包处理（从何下手），这里注意这里的入口文件位置是相对于这个webpack配置文件来的，如果从该文件出发没有知道entry中填写的要打包文件的话就会报错！

output：输出文件，也就是配置webpack打包后的文件命名、放置位置等（何去何从）

filename：打包文件名，配置打包好的文件叫什么名字（万事具备）

path：打包的文件放哪（何去何从），再使用require引入path的核心模块

__dirname：指当前根目录下，创建一个bundle的文件夹（绝对路径）

修改默认配置文件名
一般默认的配置为webpack.config.js，但如果修改了这个名字，命令不变的话就会报错，因为他连配置的说明书都没找到，更不要谈配置了，那我们怎么让他识别这个默认名呢？

$ npx webpack --config webpackconfig.js

此时使用npx webpack就可以进行打包啦

如何简化打包命令
是否记得我们使用的vue/react中直接使用的是npm run bulid这样的命令，那这种怎么配置呢？
↓
使用npm script，在工程目录中找到package.json里面是不是有一个script的命令组，然后我们写成这样：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "bundle": "webpack"
  },
  "author": "Um",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  }
}

此时不需要使用npx webpack进行打包啦，直接使用npm run bundle就相当于执行了webpack打包命令了。

**问题：那么这个运行的是全局的webpack还是项目中的webpack呢？
**
当执行了package.json中的script命令时，它会先去node_module中寻找这个命令中使用的包库，如果有就会先使用这个，没有再去查找是否有全局安装，如果都没有就会报错没有该执行指令

总结一下

三种打包命令方法：

全局安装的webpack webpack-cli -global
webpack index.js
项目本地进行安装webpack
npx webpck index.js
使用npm script
npm run bundle -> webpack

回望webpack-cli
全文只字未提webpack-cli这个是干嘛的？
这个是搭建webpack这个命令的，没有的话命令行中就不会识别webpack这个字段

补充一下打包知识点

在这里插入图片描述
细说一下Chunk Names 为main的原因：

module.exports = {
   entry:{
       "main": './src/index.js'
   },
    output: { 
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'bundle')
    }
}

其实我们一开始写的entry: './src/index.js'，就是上面代码的缩写

关于报错：
在这里插入图片描述
大概的意思就是，webpack希望你的配置里应该明确mode模式是什么，如果不写就警告，有两种打包模式一个是production(默认模式)，另一个是developmment

module.exports = {
    mode: 'production',
    // mode: 'development',
    entry:{
       "main": './src/index.js'
   },
    output: { 
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'bundle')
    }
}