webpack搭建环境

最新推荐文章于 2023-02-13 20:14:28 发布

Where-to-go

最新推荐文章于 2023-02-13 20:14:28 发布

阅读量218

点赞数

分类专栏： web端开发文章标签：前端

本文链接：https://blog.csdn.net/weixin_45523183/article/details/102844522

版权

web端开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

webpack环境

创建一个webpack需要的流程

四种安装指令对比

npm install moduleName
- 安装模块到项目node_modules目录下。
- 不会将模块依赖写入devDependencies或dependencies 节点。
- 运行 npm install 初始化项目时不会下载模块。
npm install moduleName -g（全局）
- 安装模块到项目node_modules目录下。
- 不会将模块依赖写入devDependencies或dependencies 节点。
- 运行 npm install 初始化项目时不会下载模块。
npm install moduleName -s（用于生产环境）
- 安装模块到项目node_modules目录下。
- 会将模块依赖写入dependencies 节点。
- 运行 npm install 初始化项目时，会将模块下载到项目目录下。
- 运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。
npm install moduleName -D（用于开发环境）
- 安装模块到项目node_modules目录下。
- 会将模块依赖写入devDependencies 节点。
- 运行 npm install 初始化项目时，会将模块下载到项目目录下。
- 运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。
总结：
- devDependencies 节点下的模块是在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在项目部署后是不需要的，所以我们可以使用 -save-dev （-D)的形式安装。
- 像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save (-s)的形式安装。

常用流程

1、初始化一个 package.json 文件，安装指令npm init -y

package.json作用：
- 记录了项目的配置信息，包括名称、版本、许可证等元数据
- 也会记录所需的各种模块，包括执行依赖，和开发依赖
- 以及scripts字段

2、安装webpack，安装指令npm install（i） webpack --save-dev

会产生一个node_modules文件夹

3、安装webpack-cli，安装指令npm i webpack-cli --save-dev

简易客户端,用来以webpack协议连接相应服务。
超过4.0版本的webpack需要额外安装一个命令行工具 webpack-cli（开发环境依赖 npm i -D webpack-cli

4、检测webpack是否安装成功，检查指令node_modules/.bin/webpack -v windows下需要用** 反斜杠\ **’

5、配置入口与出口文件

在src目录下创建一个main.js文件，在根目录下创建一个webpack.config.js文件
main.js文件是入口文件
- 设置了一个名为 main 的入口，并以 src 下的 main.js 作为入口文件，然后输出到根目录下的 dist 文件夹中。
webpack.config.js文件是webpack的配置文件

在webpack4中，我们需要设置 mode 属性，用来决定当前是development还是production环境，webpack会根据此值来进行一些默认操作，两种环境的不同配置后面的博文会详解，这里我们设置为 ‘none’ ，来避免默认操作。path 是 nodeJs中的核心模块用来操作路径，__dirname 表示文件的当前路径（此时为根路径）。而 output中的filename属性，[name] 表示入口的名称，此处就是 main。

```
    ++配置入口与出口文件++
    const path = require('path')

    let config = {
      mode: 'none',  // 定义开发模式
      entry: {			// 定义入口
        main: path.join(__dirname, './src/main.js')
      },
      output: {			// 定义出口
        filename: '[name].bundle.js',
        path: path.join(__dirname, './dist')
      }
    }
    module.exports = config

6、执行webpack的打包

先在package.json 文件中的script 中添加：
"build": "webpack --config webpack.config.js --progress --colors"
执行指令**npm run build**,即可完成打包
将生成在dist目录下的bundle文件引入index.html文件中即可

常用插件

1、webpack-dev-server

在没有引入webpack-dev-server之前，每次想看以下效果，必须进行npm run build重新打包加载静态资源，现在可以利用这一插件自动刷新页面，非常棒
安装方法
- 执行指令**npm i webpack-dev-server**,即可完成安装（++会报错++）
- 先在package.json 文件中的script 中添加："dev": "webpack-dev-server"
  - 运行之前必须添加这个script标签内容，不然会报错
- 执行指令**npm run dev**，即可执行插件
  - ctrl+c 可以暂停
- webpack-dev-server运行时会帮我们复制一份bundle.js文件，没有存放在物理磁盘上，而是托管在电脑的内存中，所以我们在根目录下看不见bundle.js文件
- webpack-dev-server虽然是虚拟存在电脑的内存中，但是我们可以认为和src、dist、node_module平级
引入虚拟bundle.js路径src="/bundle.js"，这时候打开http://localhost:9999/需要手动复制

引入webpack-dev-server的相关内容方式一（好用）：
在package.json 文件中的script 中添加：
"dev": "webpack-dev-server --open --port 9999 --contentBase src --hot"
- open表示自动打开浏览器
- port设置启动时候的运行端口
- contentBase表示托管的根目录
- hot表示无刷新重新加载（俗称热加载），可以减少请求数量
引入webpack-dev-server的相关内容方式二（自己试过不行）：
- 其实是将package.json中script内容分开写
- 在package.json 文件中的script 中添加：
  - "dev": "webpack-dev-server"
- 在webpack.config.js 文件中引入全局变量：
  - const webpack = require('webpack')
- 在module.exports对象中添加对象：
  - ```
    devServer: {
        open: true,
        port: 3000,
        hot: true
    },
    plugins: {
        new webpack.HotModuleReplacementPlugin()
    }
```

2、html-webpack-plugin

作用：
- 为html文件中自动引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
- 可以根据指定页面生成一个内存中的页面，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

使用：

1、安装npm i html-webpack-plugin -D

2、导入内存中生成Html页面的插件

在webpack.config.js 文件中引入全局变量：
- const htmlWebpackPlugin = require('html-webpack-plugin')
在module.exports对象中添加对象：

 plugins: [
  	new htmlWebpackPlugin({
      //创建一个 在内存中 生成html 页面的插件
  		template: path.join(__dirname, './index.html'),
      //指定模板页面，将来会根据指定的模板页面路径生成内存中的页面
  		filename: 'index.html'
      //指定生成页面的名称

})

3、处理css文件

为什么要处理非js类文件？
- 因为webpack默认只能处理js类型文件，对于非js类文件需要第三方加载器
如果需要处理css文件，那么需要什么loader加载器呢？
- 1、在入口文件中引入css文件import './css/index.css'
- 2、安装npm i style-loader css-loader -D
- 3、在webpack.config.js 配置文件中新增一个配置节点，叫做module，它是一个对象，在这个module对象上，有一个属性是rules，这个属性rules是个数组，在这个数组里面存放**所有的第三方文件（非js文件）**的匹配和处理规则
  - { test: /\.css$/, use: ['style-loader', 'css-loader'] }

4、处理less文件

为什么要处理非js类文件？
- 因为webpack默认只能处理js类型文件，对于非js类文件需要第三方加载器
如果需要处理less文件，那么需要什么loader加载器呢？
- 1、在入口文件中引入css文件import './css/index.less'
- 2、安装npm i less-loader -D
- 3、安装less-loader的内部依赖项npm i less -D
- 4、在webpack.config.js 配置文件中新增一个配置节点，叫做module，它是一个对象，在这个module对象上，有一个属性是rules，这个属性rules是个数组，在这个数组里面存放**所有的第三方文件（非js文件）**的匹配和处理规则
  - { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

5、处理sass文件

如果需要处理sass文件，那么需要什么loader加载器呢？
- 1、在入口文件中引入css文件import './css/index.**scss**'
- 2、安装npm i sass-loader -D
- 3、安装sass-loader的三个内部依赖项
  - npm i node-sass -D,这里用npm装一般不会成功（自己用npm装可以）
  - npm i sass -D,（不装也可以）
  - npm i fibers -D,（不装也可以）
- 4、在webpack.config.js 配置文件中新增一个配置节点，叫做module，它是一个对象，在这个module对象上，有一个属性是rules，这个属性rules是个数组，在这个数组里面存放**所有的第三方文件（非js文件）**的匹配和处理规则
  - { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

5、使用url-loader处理url等图片链接文件

默认情况下webpack不能处理css文件中的url地址，不管是字体库，还是图片
如果需要处理url地址，那么需要什么loader加载器呢？
- 1、在入口文件中引入css文件import './css/index.**scss**'
- 2、安装npm i url-loader file-loader -D，url也需要一个依赖文件file-loader
- 3、配置文件{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }
- 4、添加的图片会帮我们转成base64格式（能减少二次请求），但有些大图我们却并不想转成base64格式
  - url-loader后面进行传递参数limit
  - use: ‘url-loader？limit=数值’
    - 当上传图片大小（byte）>= limit数值时，图片不会被转成base64格式，
    - 当上传图片大小（byte）< limit数值时，图片会被转成base64格式，
  - 总结：大图保真，小图压缩
- 5、当我们想要两张名称一样的图片保持图片原来的名称该怎么做呢？
  - use: ‘url-loader？limit=数值**&name=[hash:8]-[name].[ext]**’
    - [hash:8]：表示取hash的8位，hash共有32位
    - [name]：表示使用图片原名称
    - [ext]：表示使用图片扩展名

6、使用url-loader处理字体文件

引入字体文件，例如bootstrap里面的
- 1、安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org
- 2、直接安装3.3.7版本bootstrap cnpm i bootstrap@3.3.7 -S,本地安装的话会提示安装jQuery
- 3（可以不装）、bootstrap4.0版本，图标和样式分离了，使用图标的话还需要安装一个叫open-iconic这个包，经过多次安装4.0失败，痛下决心使用3.3.7版本，一次成功。。。。。
  - cnpm i https://github.com/iconic/open-iconic.git -D
- 4、配置文件{test: /\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'}
- 5、在入口文件中引入css文件import 'open-iconic/font/css/open-iconic-bootstrap.css'

7.webpack中babel配置处理ES6语法（固定版本）

webpack默认只能处理ES5语法和少许的ES6语法，所以需要借助插件处理高级ES6语法
babel可以帮我们将高级语法转成低级语法，安装以下三个配置即可
- npm install -D babel-loader@7.1.4
  - 这里的babel-loader最好不要超过7.15版本，版本高会报错
- npm install -D babel-core@6.26.0
- npm install -D babel-preset-env@1.6.1
打开配置文件，rules数组中添加新的匹配规则
- { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ }
- exclude表示不包含这个文件，由于node_modules里面的js文件都是已经打包好的，没必要二次打包，而且二次打包还不能运行程序

根目录下创建.babelrc文件

   {
       "presets": ["env"], //配置语法
       "plugins": [] //配置插件(为空，可以不写）
   }

8、webpack中如何使用vue

安装vue的包：cnpm i vue -s
由于在webpack中，推荐使用.vue这个组件模块定义组件，所以，需要安装能解析这种文件的loader：cnpm i vue-loader vue-template-compiler -D

在min.js中，导入vue模块 import Vue from 'vue'，这是导入的是阉割版的vue，要使用的话需要加一个配置，在package.cpnfig.js中加入

const VueLoaderPlugin = require('vue-loader/lib/plugin')

plugins: [
    new VueLoaderPlugin()
],

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        }
    ]

定义一个一个.vue结尾的组件，其中，组件有三部分组成：template、script、style
使用import login from './login.vue'导入这个组件
创建vm实例`var vm = new Vue({el:"#app",render: c => c(login) })
在页面中创建一个id为app的元素，作为vm控制的区域

9、webpack中如何使用vue-router（路由）
10、webpack中如何使用MUI

index.html首页引入吧，在main里面引入没法用

11、webpack中如何使用vue-cli快速构建项目

12、git仓库使用命令
基本命令：

git status 查看当前的状况
git add 由工作区提交文件到暂存区
git commit -m"提交描述" 由暂存区提交到仓库

操作流程：

基本信息设置

	1、设置用户名：
	     git config --glibal user.name'wait-for-the-wind'

    2、设置用户邮箱：
        git config --glibal user.email'739178270@qq.com'

12、axios使用
属性：axios是基于promise封装的ajax库
1、安装npm install axios

未完待续（各位朋友有什么好的插件也可以给我分享一下呐），如有错误之处，各位朋友也可以私信给我并予以改正

Where-to-go

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack搭建环境

webpack环境创建一个webpack需要的流程四种安装指令对比npm install moduleName安装模块到项目node_modules目录下。不会将模块依赖写入devDependencies或dependencies 节点。运行 npm install 初始化项目时不会下载模块。npm install moduleName -g（全局）安装模块到项目node...
复制链接

扫一扫

专栏目录