webpack的使用

webpack的使用

1、webpack的安装与配置

1.1、webpack安装

//在集成终端里面输入命令
npm install webpack webpack-cli --save-dev
//这里--save-dev也可以简写为-D，这个的含义是只在开发中使用，在项目上线之后不使用，-S是-save的简写的，意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。

1.2、webpack的基本配置

module.exports={
    mode:'development' // 开发模式
}

1.3、配置的启动命令

//在package.json文件中 ，在 scripts 属性中加入代码
"dev":"webpack"
//启动打包命令的语法
在集成终端里面输入：npm run dev

1.4、打包的入口和出口文件

// 获取当先文件的物理路径
const path=require('path')
module.exports={
  mode:'development',
  entry:path.resolve(__dirname,'index.js'), //这个是入口文件，输入入口文件的物理路经
  output:{
    path:path.resolve(__dirname,'upload'),
    filename:"bundle.js"
  },
    //output是出口文件的配置，其中path的作用是创建文件夹，
    //filename的作用是设置出口文件的名字，可以不设置，有默认值

自动打包

1、webpack下载插件

第一步：安装webpack-dev-server github
通过命令：npm install --save-dev webpack-dev-server
第二步：配置package.js文件里面dev，改成：webpack serve，
这个时候自动打包配置完成了。

2、解决最新打包文件暂存问题

**问题：**虽然配置完成但是当我们修改完文件进行保存时，这个时候我们打包文件真正没有被修改，会在暂存区出现一个新的文件这个文件，这个新文件会出现在我们项目的根目录下，我们可以通过http://localhost:8080/bundle.js来进行查看，这个时候我们就要解决让文件重新在页面上进行渲染。

2.1解决方式

**第一种：**我们可以把index.html文件复制一份把他放在根目录下面，在这个里面在引入根目录下新的bundle.js文件。

**缺点：**当我们修改src文件里的index.html文件之后，还要在根目录下的index.html文件保持一致，（太麻烦）

**第二种：**使用插件HtmlWebpackPlugin

作用：可以自动地把src文件里面的index.heml文件拷贝一份放在根目录下

第一步：
安装插件：npm install --save-dev html-webpack-plugin
第二步：
// 引入HtmlWebpackPlugin
const HtmlWebpackPlugin=require('html-webpack-plugin');
第三步：在module.exports里面写入，进行配置
plugins: [new HtmlWebpackPlugin({
    template:'./src/index.html',//这个是要拷贝的文件
    filename:'index.html',//拷贝的目录文件
  })],
最后：npm i loader-utils -D 安装loader-utils

加载器

1、处理css文件

文件打包比link引入css文件的优点：

1、文件打包是把所有的文件都读取到一个文件，页面引入这一个文件进行页面的渲染

2、大大减少了网络读取和请求文件的数量，提上网页的速度

2、打包的方式引入css

第一步引入css文件：
import './src/css/index.css'
//使用import直接引入css文件的路径，该路径是参照根目录下index.html来写的
//当然这样写是不会给打包的，要安装打包css文件的工具，css-loader


第二步安装css-loader
命令：npm install --save-dev css-loader style-loader


第三步配置文件
在我们webpack.config.js里面配置文件，
module:{
    rules: [
      { test: /\.css$/, use: ['style-loader','css-loader'] },
      //test是处理后缀名为什么的文件，这个里面用正则
      //use是你想用什么来进行处理
      // 注意：当我们使用css-loader的时候也要安装style-loader，这两个配合使用
    ],
  }
    

---

css-loader和style-loader的作用

• css-loader是把css文件里面的代码读出来
• style-loader是把css文件写进html文件里面来，在html文件里面生成

3、打包less文件

第一步安装
命令：npm install less-loader less -D


第二步配置
module:{
    rules: [
      { test: /\.less$/, use: ['style-loader','css-loader','less-loader'] }
      //less文件是要先转化为css文件所以需要css-loader，同样也需要style-loader进行写入
      //test是处理后缀名为什么的文件，这个里面用正则
      //use是你想用什么来进行处理
      // 注意：当我们使用css-loader的时候也要安装style-loader，这两个配合使用
    ],
  }

    
第三步引入文件
import './src/css/a.less'

4、打包图片

方法一使用 url-loader

第一步安装
命令：npm i file-loader url-loader -D
第二部配置文件
{
    test: /\.jpg|png|gif|bmp|jfif|ttf|eot|svg|woff|woff2$/,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 614400 // 代码中使用的图片为500k
        }
    }]
}
//test这个还是文件的后缀名
//use是一个数组，里面可以写字符串，也可以写数组
//use里面的loader是使用哪个处理器来进行处理

注意：代码中“limit: 614400” 的含义：

是图片的尺寸，单位是子节，这里面当上传图片得大小小于614400个子节时，他会把图片得源码放进引入的文件里面去，当大于614400个子节时会当成一个资源引入

5、高级语法

第一步：
语法：npm install -D babel-loader @babel/core @babel/preset-env
作用：是把js高级语法转化为普通语法，使老版本的浏览器也支持
第二步配置：
{
      test: /\.m?js$/, //这里是处理js文件的
      exclude: /(node_modules|bower_components)/, //这个的作用时排除掉node_modules文件，和bower_components文件里面的高级js语法
      use: {
          loader: 'babel-loader',
          options: {
          presets: ['@babel/preset-env'] //这个时处理的方式，这个是静态的处理方式
          }
      }
  }
第三步安装babel 相关插件：
命令：npm i -D @babel/plugin-proposal-class-properties
配置babel：
options: {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-proposal-class-properties'] // 新加的配置
}