一文入门webpack4

最新推荐文章于 2024-09-15 21:28:53 发布

bieyezhongcai

最新推荐文章于 2024-09-15 21:28:53 发布

阅读量67

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/bieyezhongcai/article/details/132396980

版权

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使用

// 测试axiosimport 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，之后使用流程略

bieyezhongcai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫