以前写的webpack文档

Dengcaijun666
41 阅读3分钟

webpack 的基本配置

配置了当前的环境为开发环境

配置入口文件为 ./src/index.js

配置出口文件路径 __dirname/dist 文件夹

出口文件的名字配置 '[name]-[hash:8].js'

配置清除原来打包的垃圾文

c02526953c5dfaf106254ddc6744aea.png 执行命令 webpack 进行打包

如果 webpack 指令无法打包，尝试先全局安装 webpack 和 webpack-cli

如果全局安装之后还不能打包，那么尝试使用 npx webpack 再来尝试

配置 html 文件和打包的文件产生联系

打包之后的 dist 目录中有打包好的 js 文件，那么我们该如何让这个文件和 index.html 产生联系

并且还要在 index.html 中自动导入这些文件

安装：cnpm i html-webpack-plugin

在配置文件中导入 const HtmlWebpackPlugin = require('html-webpack-plugin')

在配置中添加一个插件配置

// 导入所需插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
 ...
  // 配置插件
  plugins: [
    // 将 ./public/index.html 文件渲染到打包目录中
    new HtmlWebpackPlugin({
      // html 模板
      template: './public/index.html'
    })
  ]

}

配置样式

配置 css 样式解析器

  • 在 src 下创建一个 index.css
html,body {
  height: 100%;
  background-color: #f66;
}
  • 在 index.js 中导入该 css 文件 import './index.css'

webpack 打包，打包的时候会出现一下报错信息

36ea5283ad5452a650091674be009f4.png

当打包遇倒该报错信息，是因为咱们当前项目没有配置 css 的样式加载器

提示我们需要加入一个加载器来进行解决

安装加载器： cnpm i style-loader css-loader

配置加载器:

db364ff654c28a20cd39e28b7bce187.png

配置 scss 解析器

  • 将原来的 Index.css 后缀名改为 scss
  • 改完之后重新进行打包处理
  • 打包的时候发现报错

8a2b47ff74d2631611f4b9ce1a43ba6.png

如果打包的时候报错 scss 有问题

此时我们需要安装 sass 的加载器

安装： cnpm i node-sass sass-loader

配置：安装完加载器之后配置以 .scss 结尾的文件使用对应的加载器即可

106c9f917e767daedc981917d839d6c.png

配置 less 解析器

当我们将 scss 文件后缀名改为 less 后再次打包发现报错

8a2b47ff74d2631611f4b9ce1a43ba6.png 需要配置 less 文件的加载器

安装： cnpm i less less-loader

配置：安装完加载器之后配置以 .less 结尾的文件使用对应的加载器即可

module: {
    rules: [
      {
        // 匹配哪些文件需要使用加载器
        test: /\.css$/,
        // 配置被匹配到的文件使用说明加载器
        use: ['style-loader', 'css-loader']
      }, {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }, {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }

将样式文件配置为独立文件

将样式文件也打包成独立文件

安装 独立配置 样式文件的插件

cnpm i mini-css-extract-plugin

导入当前插件，然后在配置文件中进行配置

// 导入配置 css 独立文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
plugins: [
    // 将 ./public/index.html 文件渲染到打包目录中
    new HtmlWebpackPlugin({
      // html 模板
      template: './public/index.html'
    }),
    new MiniCssExtractPlugin({  // +++++++++++++++++++++++++++++
      // css 文件单独打包后的文件位置
      filename: 'css/[hash:8].css'
    })
  ],
 module: {
    rules: [
      {
        // 匹配哪些文件需要使用加载器
        test: /\.css$/,
        // 配置被匹配到的文件使用说明加载器
        use: [MiniCssExtractPlugin.loader, 'css-loader'] //  ++++++++
      }, {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']//  ++++++++
      }, {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']//  ++++++++
      }
    ]
  }
  • 重新执行打包命令即可自动生成独立的 css 文件 -安装： cnpm i react react-dom @babel/core babel-loader @babel/preset-env @babel/preset-react

配置文件中修改

module: {
 rules: [
   	...
     {
     test: /\.(js|jsx)$/,
     use: [
       {
         loader: 'babel-loader',
         options: {
           presets: [
             '@babel/preset-env', // js 的新语法
             '@babel/preset-react' // react 的语法
           ]
         }
       }
     ]
   }
 ]
},

创建一个 App.jsx

import React, { Component } from 'react';
// react 的根组件
class App extends Component {
render() {
 return (
   <div>
     你好中国 {2 + 3}
   </div>
 );
}
}

export default App;

在 index.js 入口文件中配置组件

// 导入全局样式
// import './index.less'
// console.log('别人对你很温柔');

import React from "react";
import ReactDOM from "react-dom/client";

import App from '@/App'

const app = ReactDOM.createRoot(document.getElementById('app'))

app.render(<App />)

图片配置加载器 直接在 react 项目中导入使用 zfb.png 会产生以下报错

c206a3492d3a1d04005f19932d2c481.png 无需安装插件直接做配置即可

module: {
 rules: [
   	...
     {
     // 配置图片
     test: [/\.jpe?g$/, /\.png$/, /\.svg$/, /\.weeb$/, /\.weep$/],
     type: 'asset', // 通用的资源类型
     parser: {
       dataUrlCondition: {
         maxSize: 5 * 1024, // 5kb
       },
     },
   }
 ]
},

数据请求 axios

安装： cnpm i axios

组件中导入使用 axios ``

import React, { Component } from 'react';
import zfb from './zfb.png'
import axios from 'axios';
class App extends Component {

// 创建一个响应式数据
state = {
 list: []
}

// 组件生命周期
componentDidMount(){
  // 跨域了无法拿到数据
 // axios.get('http://open.douyucdn.cn/api/RoomApi/live').then(res => {
 //   console.log(res);
 // })
}

render() {
 return (
   <div>
     <img style={{width: '100px'}} src={zfb} alt="" />
     你好中国 {2 + 3}

     <ul>
       {this.state.list.map(item  => {
         return (<li>{item.room_name}</li>)
       })}
     </ul>
   </div>
 );
}
}

export default App;

配置代理解决跨域问题

在配置文件中做以下配置

devServer: {
 port: 3000,
 // 配置跨域问题
 proxy: {
   '/api': {
     target: 'http://open.douyucdn.cn',
     changeOrigin: true
   }
 }
}

页面中直接使用

axios.get('/api/RoomApi/live').then(res => {
   console.log(res);
   // 给数据数据设置值
   this.setState({
     list: res.data.data
   })
 })

vue 脚手架配置

安装：cnpm i vue-loader@15 vue-template-compiler vue@2

配置插件

// 导入 vue 的加载器
const VueLoader = require('vue-loader/lib/plugin')

// 配置插件
plugins: [
 // 配置 vue 加载器
 new VueLoader(),
 ...
],

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

在 src 中创建一个 App.vue 文件

<script>
import axios from 'axios'
export default {
name: 'App',
data () {
 return {
   msg: '一节课不旷，一节课不听，主打的就是陪伴。',
   count: 100,
   list: []
 }
},
mounted () {
 axios.get('/api/RoomApi/live').then(res => {
   console.log(res);
   this.list = res.data.data
 })
}
}
</script>
<template>
<div>
 <h1>{{ msg }} -- {{ count }}</h1>
 <button @click="count++">点击</button>

 <ul>
   <li v-for="item in list">{{ item.nickname }}</li>
 </ul>
</div>
</template>

入口 js 文件配置 index.

import Vue from 'vue'

import App from '@/App'

new Vue({
render: h => h(App)
}).$mount('#app')

项目热更新

安装：cnpm i webpack-dev-server

在 package.json 中做启动配置

"scripts": {
 "start": "webpack-dev-server --config webpack.config.js",
 "build": "webpack --config webpack.config.js"
},

npm start 启动项目

npm run build 打包项目

avatar
文章
阅读
粉丝