Webpack打包和插件

Webpack打包和插件

打包入口和出口文件

入口文件

就是项目或程序被请求的时候，第一个被访问到的文件，此文件再找相对应的模块进行处理

出口文件

打包之后的文件目录以及名称

webpack 有一些默认配置

• 入口文件：src/index.js
• 出口文件：/dist/main.js

重新配置入口文件和出口文件

const path=require('path')
module.exports={
    mode:'development', // 开发模式
    entry:path.resolve(__dirname,'./src/index.js'),
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:"bundle.js"
    }
}

运行 npm run dev 命令查看打包结果

自动打包

不需要修改代码后重新运行 npm run dev 命令

安装

npm install --save-dev webpack-dev-server

修改 pacjkage.json 中的启动命令

"dev":"webpack serve --open"

运行

npm run dev

会使用 webpack-dev-server 进行打包，成功后，会自动打开浏览器，地址为 localhost:8080

打包后，webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，可以通过如下地址访问

所以要修改 src/index.html 的引入路径为

 <script src="/bundle.js"></script>

生成预览页面

index.html 在 src 目录下，访问起来比较麻烦

解决方案：可以将 src 目录下的 index.html 拷贝一份到根目录下，这样访问 localhost:8080 时，就会默认渲染 index.html

修改完 index.html 后还需要手动拷贝比较麻烦 ，使用插件

第一步：
安装插件：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

安装

npm install --save-dev html-webpack-plugin

在 webpack.config.js 中编写代码

const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin');
const htmlPlugins=new HtmlWebpackPlugin({
    template:'./src/index.html',
    filename:'index.html'
})
module.exports={
    mode:'development', // 开发模式
    entry:path.resolve(__dirname,'./src/index.js'),
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:"bundle.js",
    },
    plugins:[
        htmlPlugins
    ],

重新运行 npm run dev后

再次访问：http://localhost:8080/，就会运行index.html

但是跟目录下并没有 index.html ，因为其仍然创建在内存中

加载器

webpack 默认只能打包 .js 模文件，其他静态文件，如 .css，图片等默认不能处理，如果不加载对应的加载器，则会报错

处理css文件

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

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

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

编写样式

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

li {
    line-height: 45px;
}

index.js 中导入 index.css

import './css/index.css'

安装 loader

npm install --save-dev css-loader style-loader

配置 webpack.config.js

//test是处理后缀名为什么的文件，这个里面用正则
     //use是你想用什么来进行处理
     // 注意：当我们使用css-loader的时候也要安装style-loader，这两个配合使用

处理less

安装

npm install less-loader less -D

rules 中增加一条规则

css-loader和style-loader的作用

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

css 目录中新建 a.less

body {
    background-color: #ccc;

    ul {
        list-style-type: none;

        li {
            line-height: 35px;
        }
    }

}

index.js 中引入 a.less

import './css/a.less'

重新打包程序

处理图片

第一步安装
命令：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是使用哪个处理器来进行处理

index.css中编写代码，为 body 设置背景图片

body {
    background-image: url(../images/1.jfif);
}

重新运行

npm run dev

注意：代码中“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'] // 新加的配置
}

插件

• vue 单文件组件以 .vue 作为后缀名
• vue 单文件组件包含三个部分，分别用于编写结构、样式和业务逻辑，其实每一个组件就相当于一个 html 页面，只不过后缀名是 .vue 而不是 .html
• vue 单文件组件利用了 ES6模块化的语法，从下面的 export default 可以看出来，也就是说每个组件都是一个模块，这样就可以避免命名冲突的问题

<template>
  <h1>{{ msg }}</h1> 
</template>
<script>
export default {
  data() {
    msg: "hello world";
  },
};
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

src 目录下创建 App.vue 组件

<template>
  <h1>{{ msg }}</h1>
</template>
<script>
export default {
  data() {
    msg: "hello world";
  },
};
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

在 index.html 中引入和使用组件

引入的目的

• 将 App.vue 中的 template 中模板部分代码替换index.html 中的 id为 app div
• 将 App.vue 中的 css 代码也拷贝到 index.html 文件中
• 将 APP.vue 中的 script 中代码打包到 bundle.js 中

安装 vue

npm i vue

配置webpack

安装 vue-loader

npm install -D vue-loader vue-template-compiler

index.js 中编写代码

import Vue from 'vue'
import App from './App.vue'

let vm = new Vue({
    el: '#app',
    render: h => h(App)
})