Webpack

Sweety
57 阅读7分钟

01-webpack配置文件

安装(window+r cmd中安装)

  • 在安装webpack时，我们需要同时安装webpack-cli
  • npm install webpack webpack-cli –g # 全局安装
  • 使用：零配置打包
  • npm install webpack webpack-cli –D # 局部安装

01-配置入口和出口

先安装其他的依赖：npm i，产生node_modules文件夹；再安装工具和插件；最后配置

  • 复制代码到另一个文件夹时，不需要复制node_modules文件夹，可以通过npm i 生成

局部的webpack 02_basic文件夹

真实开发中，我们不会使用全局的webpack进行打包，我们都是在当前项目中安装webpack(局部)

  • 创建一个src入口文件
  • 第一步：通过 npm init -y创建package.json文件(配置命令)
  • 第二步：安装局部的webpack，输入npm install webpack webpack-cli -D
  • 第三步：使用局部的webpack，输入npx webpack (用的不多)

一般会配置脚本

  • 第四步：在package.json中创建scripts脚本，执行脚本打包即可 npm run build image.png

    webpack可以把多个文件打包成一个文件
src文件夹 里面一般是项目的源码，有个依赖的入口可以叫main.js，还可以有很多其他模块
打包后的资源,默认生成一个dist文件夹；默认的文件叫main.js
webpack默认是0配置就可以打包的

也可以在根目录下配置

  • 在项目的根目录下面，创建一个webpack.config.js文件(配置)。 image.png

  • 在package.js文件中 (webpack.config.js不改名的情况)

          通过npm init -y创建一个package.json文件
      输入"build":"webpack"

image.png

配置文件是其他名字

  • 配置文件，可以是其它的名字，如果是其它名字，在打包时，就需要指定了。

  • 怎么指定？

         在package.js文件中配置，输入--config wk.config.js

image.png

02-webpack打包常见资源

01-打包css文件

  • 默认情况下webpack可以打包js代码
  • webpack默认只能打包js模块，不能打包css模块

打包非JS文件，我们需要安装一个loader来处理此文件

loader的加载顺序：从下向上、从后向前

安装css-loader：npm i css-loader -D  表示只解析 没效果

  • 配置css-loader，去使用 (在webpack.config.js文件里) image.png

        安装style-loader: npm i style-loader -D

image.png

02-打包less文件

  • less-loader需要使用less工具来转化less

  • 安装：npm i less less-loader -D

  • 使用less-loader，来自动使用less工具转换less到css

      rules:[
      {
           test: /\.less$/,
           use:["style-loader","css-loader","less-loader"]
      }
      ]

03-postcss工具的使用

  • postcss是一个工具，上面有很多插件

  • 这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置 image.png

    不仅需要下载工具，还需要安装插件
安装postcss-loader npm install postcss-loader -D
安装添加前缀的插件 npm install autoprefixer -D

image.png

单独配置文件管理

  • 在根目录下创建postcss.config.js
  • 将这些配置信息放到一个单独的文件中进行管理 image.png

postcss-preset-env

     postcss-preset-env也是一个postcss的插件
     安装：npm install postcss-preset-env -D
     postcss-preset-env就是所有插件的集合，是个插件集

04-打包图片

  • 在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader

资源模块类型(asset module type)

  • asset/resource
  • asset/inline
  • asset/source
  • asset image.png

自定义文件的输出路径和文件名

  • 方式一：修改output，添加assetModuleFilename属性； image.png

  • 方式二：在Rule中，添加一个generator属性，并且设置filename； image.png

05-打包JS

  • 以前默认打包的JS不能把高级语法打包成低级语法

利用babel打包JS高级语法

 安装：npm install @babel/cli @babel/core -D    安装的局部

  • 使用babel来处理我们的源代码

  • 局部使用方法：npx babel src --out-dir dist 局部，src是文件夹

  • 使用之后没变，因为要安装插件

    如果你要在CMD窗口中使用abc命令，使用方式如下：
 1）把abc安装到全局   
    npm i abc -g 
    在CMD窗口中就可以使用abc 
 2）把abc安装到局部   
   npm i abc -D
   在CMD窗口中就可以使用npx abc
 3）把abc安装到局部  
   npm i abc -D
   在package.json配置命令
     "build:"abc"
   在CMD窗口中就可以使用npm run build

image.png

插件的使用 转换箭头函数

  • 转换箭头函数，那么我们就可以使用箭头函数转换相关的插件
  • 装插件：npm install @babel/plugin-transform-arrow-functions -D
  • 指定插件
  • 把dist文件夹删了，再装：npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
  • 通过以上步骤，把箭头函数转成了普通函数

let/const转成var

  • 使用 plugin-transform-block-scoping 来进行转化
  • 装插件：npm install @babel/plugin-transform-block-scoping -D
  • 转化 需指定插件，如下：
  • 把dist文件夹删了，再装：npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

babel-loader

  • 安装依赖：npm install babel-loader -D （之前已经安装了@babel/core，那么不需要再次安装）
  • 配置规则，在加载js文件时，使用我们的babel image.png
  • 其他地方配置——就是指在根目录下创建一个单独的babel.config.js文件 image.png

Babel的预设preset

  • 安装：npm install @babel/preset-env -D
  • 使用：npx babel src --out-dir dist --presets=@babel/preset-env

06-打包vue

首先npm i,安装其他依赖

  • 要使用vue，需要安装vue：npm i vue@next

安装vue-loader， @vue/compiler-sfc

  • npm i vue-loader
  • npm i @vue/compiler-sfc

03-webpack常见插件

01-CleanWebpackPlugin

CleanWebpackPlugin：第二次打包时自动把第一次生成的dist文件夹清除

  • 安装：npm install clean-webpack-plugin -D

    配置如果不会可以在npm(https://www.npmjs.com/)网站搜索：clean-webpack-plugin     下同

02-HtmlWebpackPlugin

  • 之前是在src根目录下手动创建html文件，并且将js手动导入html文件里
  • 现在使用HtmlWebpackPlugin，可以生成一个html文件，并将打包后的js插件到html中
  • 安装：npm install html-webpack-plugin -D

指定模板 image.png

  • template：指定我们要使用的模块所在的路径；

  • title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息；

    在根目录下创建一个装模板的文件夹public，把设置的模板写在public文件夹下的index.html文件里

image.png

  • 还可以配置title 在npm网站查 image.png

03-DefinePlugin

DefinePlugin：往程序里注入一些变量

DefinePlugin的使用

  • DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）
  • 编译template就可以正确的编译了，会读取到BASE_URL的值

在模板中使用(public文件下的index.html里)

方法一 image.png image.png 方法二 image.png image.png

在入口文件中使用 image.png

04-Mode配置

  • 打包分两类：

    1）生产模式打包
2）开发模式打包

  • 通过mode选项指定打包模式(就不会有警告了)：

    mode:"production"  没有指定，默认值也是production
  特点：打包后的代码，都是压缩丑化后的
  会向process.env中注入环境变量  NODE_ENV   生产模式打包值是production
mode:"development"  指定开发模式打包
  特点：打包后的代码，没有压缩丑化   有很多注释
  会向process.env中注入环境变量  NODE_ENV   开发模式打包值是development

image.png image.png

05-搭建本地服务器

webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中 image.png

  • webpack-dev-server

       安装：npm install webpack-dev-server -D

两个配置

  • 在webpack.config.js中配置devServer
  • 在package.json中配置serve命令 不会配置就去npm上搜索 image.png image.png

改完代码浏览器会自动打包更新 image.png

06-区分开发环境

创建三个文件：

  • webpack.comm.conf.js 放共有的配置
  • webpack.dev.conf.js 开发依赖的配置
  • webpack.prod.conf.js 生产依赖的配置 image.png image.png image.png

指定路径(package.json)：

  • npm run build走这个文件
  • npm run serve走这个文件 image.png
  • 项目开发过程中 在内存中打包 npm run serve
  • 项目开发完毕 在硬盘中打包 npm run build

07-vue脚手架的使用

vue --version  检查安装的版本
安装：npm install -g @vue/cli
创建新项目：vue creat hello-word

image.png

avatar
文章
阅读
粉丝