一文入门 webpack4 ( 极力推荐!!! )

最新推荐文章于 2021-11-10 12:44:24 发布

置顶 wx-18538561085

最新推荐文章于 2021-11-10 12:44:24 发布

阅读量1.4w

点赞数 1

本文链接：https://blog.csdn.net/qq_40137978/article/details/106511584

版权

Vue3+版本与之前的版本有了很大的变化，少了很多有关
webpack的配置，这让我们关注与Vue的开发，不需要过多的关注webpack配置问题，然而webpack作为前端开发的利器，还是非常有必要掌握的。

WebPack主要概念：

A、入口：webpack从哪些文件开始构建依赖关系，比如main.js，other.js
B、打包结果：webpack需要将构建好的文件放入哪个位置，比如dist目录，bundle.js
C、加载器：webpack可以将哪些类型文件，加载需要通过加载器加载对应类型文件，放入依赖，打包，比如home.vue，main.css
D、插件：webpack通过固定插件来实现自身功能，比如index.html 的自动生成和压缩需要使用到插件html-webpack-plugin
E、模式：开发模式（开发过程中使用）、生成模式（项目部署），一般开发模式和生产模式都会有独立的配置文件，依赖通用配置文件

Npm项目初始化

npm init –y

(需要不在中文目录)

安装webpack

npm install webpack webpack-cli --save-dev

使用webpack打包js

安装axios

npm install  xios –S

index.html 中引入最终会得到的包 main.js

<script src="main.js"type="text/javascript" charset="utf-8"></script>

在index.js中测试axios使用

// 测试axios
import axios from 'axios'
axios.get("https://yesno.wtf/api").then(res=>{
         console.log(res.data);
})

使用npx webpack 打包index.js得到的main.js中既包含自己编写代码，又包含axios源码

同理可以打包其他的js文件

Webpack的配置文件

const path = require('path');

module.exports = {
         // 入口
  entry:'./src/index.js',
  // 打包结果
  output: {
    filename:'bundle.js',
    path:path.resolve(__dirname, 'dist')
  }
};

Npx webpack 可以使用该配置文件打包

注意配置文件名默认为webpack.config.js

创建npm指令

在package.json中script添加指令

 "scripts": {
   "test": "echo \"Error: no test specified\"&& exit 1",
         "build":"webpack"
  },

之后就可以使用 npm run build 编译打包
注意需要将index.html 中的引入的main.js内容换成 bundle.js

Webpack使用加载器加载对应资源

加载css

安装加载器

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

配置加载器

在webpack.config.js 中rules中添加加载规则

{
            // 加载文件类型
   test:/\.css$/,
            // 使用何种加载器
   use: [
            //加载器列表 按顺序从又向左
     'style-loader',
    'css-loader'
   ]
},

在src目录下新建assets/css/main.css文件

编写样式

* {
      color: red;
  }

在main.js引入样式

// 测试样式css加载
import './assets/css/main.css'

重新打包 npm run build 页面中文件变红

加载图片

安装加载器

npm install --save-dev file-loader

配置加载器

// 配置图片类型加载器
{
  test: /\.(png|svg|jpg|gif)$/,
  use: [
    'file-loader'
  ]
}

新建src/assets/image目录放入head.png

在index.html中编写元素

<div></div>

在main.css中编写样式

.head{
         width:100px;
         height:100px;
         background-image:url('./image/head.png');
}

重新编译 npm run build ，图片会被自动放入dist中，并且建立依赖关系，运行index.html即可看到图片

配置多个入口

在src文件夹新建other.js

将index.js中的内容复制到other.js

在index.js中编写测试输出
console.log(“index入口”);

修改配置的入口与出口内容

  // 入口
  entry:{
        main:'./src/index.js',
        other:'./src/other.js'
  },
  // 打包结果
  output: {
    // filename:'bundle.js',
         filename:'[name].bundle.js',
    path:path.resolve(__dirname, 'dist')
  },

此时重新打吧会生成多个bundle.js 注意修改index.html中的引入需要重新编写

配置动态html

安装生成htm插件

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

配置插件在webpack.config.js中修改配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 
 plugins: [
                 newHtmlWebpackPlugin({
                   title: '自动生成的html',
                   template: 'index.html',
                   inject: true
                 })
  ]

建立生成index.html的参考文件在项目根目录新建index .html作为参考

<!DOCTYPE html>
<html>
         <head>
                 <metacharset="utf-8">
                 <title><%= htmlWebpackPlugin.options.title %> </title>
         </head>
         <body>
                 <divid="app">
                          vue
                 </div>
                
                 <divclass="head"></div>
                
                 <!--自动生成的bundle会被自动注入在下方 -->
                
                
         </body>
</html>

Dist自动清理插件

安装插件

npm install clean-webpack-plugin --save-dev

配置插件

const { CleanWebpackPlugin }=require('clean-webpack-plugin');
//在plugins中添加配置
new CleanWebpackPlugin(),

此时重新npm run build 则可以重新编译打包，并且清理dist内容

配置热更新

安装开发服务器

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

修改配置文件

devServer: {
   contentBase:'./dist'
},

添加一个 script 脚本

"serve": "webpack-dev-server --open",

配置生产环境与开发环境配置分离文件

在根目录新建config文件夹内创建配置文件
webpack.config.base.js、
webpack.config.dev.js、
webpack.config.prod.js
webpack.config.base.js 配置文件中编写通用配置

// 通用webpack配置参数
 
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} =require('clean-webpack-plugin');
 
module.exports = {
         // 入口文件 将那个js文件作为包的入口文件
  entry:{
           main:'./src/index.js',
  },
  // 配置输出文件
  output: {
    // filename:'bundle.js',
         filename:'[name].bundle.js',
    path:path.resolve(__dirname, '../dist')
  },
  // 配置加载器
  module: {
    rules: [
      {
                   // 加载文件类型
        test:/\.css$/,
                 // 使用何种加载器
        use: [
                          //加载器列表 按顺序加载
         'style-loader',
         'css-loader'
        ]
      },
           // 配置图片类型加载器
      {
        test:/\.(png|svg|jpg|gif)$/,
        use: [
         'file-loader'
        ]
      }
    ]
  },
  plugins: [
             new CleanWebpackPlugin(),
                 newHtmlWebpackPlugin({
                   title: '自动生成的html',
                   template: 'index.html',
                   inject: true
                 })
  ],
};

在webpack.config.dev.js编写开发配置

const merge = require('webpack-merge');
const base = require('./webpack.config.base.js');
 
 
// 将开发独有配置参数  与通用配置参数合并
module.exports = merge(base, {
         entry:{
                   // other.就是是测试功能 仅在开发模式下需要
                   other:'./src/other.js'
         },
    devServer: {
      contentBase:'./dist',
           port: 8088,
           open:true
    },
        
});

在webpack.config.dev.js编写生产配置

const merge = require('webpack-merge');
const base = require('./webpack.config.base.js');
 
 
// 将生产独有配置参数  与通用配置参数合并
module.exports = merge(base, {
  // 配置调试工具 资源映射 图  仅在生产模式下需要
  devtool: 'eval',
});

修改npm配置，指定生产开发配置文件

"scripts": {
   "test": "echo \"Error: no test specified\"&& exit 1",
   "build": "webpack --configconfig/webpack.config.prod.js",
         "serve":"webpack-dev-server --config config/webpack.config.dev.js"
  },

Webpack搭建vue工程

安装Vue

npm install vue

安装vue文件加载器
vue-loader版本采用此处采用15.9.2

npm install vue-loader vue-template-compiler –S

配置vue加载器

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

配置插件

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

在main.js中编写vue实例
将index.js改名为main.js 作为Vue入口文件

在main.js同级目录新建App.vue

import Vue from 'vue'
import App from './App.vue'
 
new Vue({
         el:"#app",
         render:h=>h(App)
})

重新打包编译即可

安装vue-router,vuex，之后使用流程略

wx-18538561085

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
一文入门 webpack4 ( 极力推荐!!! )

Vue3+版本与之前的版本有了很大的变化，少了很多有关webpack的配置，这让我们关注与Vue的开发，不需要过多的关注webpack配置问题，然而webpack作为前端开发的利器，还是非常有必要掌握的。WebPack主要概念：A、入口：webpack从哪些文件开始构建依赖关系，比如main.js，other.jsB、打包结果：webpack需要将构建好的文件放入哪个位置，比如dist目录，bundle.jsC、加载器：webpack可以将哪些类型文件，加载需要通过加载器加载对应类型文件，放入依赖
复制链接

扫一扫