webpack配置

最新推荐文章于 2024-07-28 00:56:04 发布
最新推荐文章于 2024-07-28 00:56:04 发布
阅读量124 收藏
点赞数 1
文章标签： javascript node.js npm webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37899727/article/details/116234425
版权

webpack

webpack是前端模块化打包工具

  • grunt/glup核心是task，主要核心是前端流程的自动化，模块化不是它的核心；工程模块比较简单没有依赖可以用。

  • webpack加强模块化的开发管理，而不是压缩文件预处理功能，这些只是它的附加功能。需要node环境

一、webpack入门流程

npm init -y                               //初始化生成 package.json 文件

npm i webpack --save-dev                  //安装 webpack，save-dev开发时依赖

npm install webpack webpack-cli webpack-dev-server  -g       //安装 webpack-cli

"private": true,       //调整 package.json 文件，以便确保我们安装包是私有的(private)
    
npm install --save lodash      //打包 lodash 依赖

npx webpack .\src\main.js --output-filename bundle.js --output-path .\dist\ --mode development        //输入main.js文件，输出bundle.js文件，输出路径dist目录下

npx webpack ./src/main.js -o ./dist/bundle.js  //效果基本与上面相同 
webpack  ./src/main.js -o ./dist/bundle.js//表示把模块化的入口文件main.js打包到dist文件bundle.js

二、配置压缩js的结构

webpack.div.js                
 
    var path = require('path')    //node系统模块
 
module.exports = {         
entry: {
   main: './src/main.js'//入口文件
},       
mode: 'development',// 压缩模式
output: {  //输出配置
filename: '[name].js',    //输出名字配置【name】为原来的名字
path: path.resolve(__dirname, '../dist')   //输出的路径
}
}，
module: {
  rules：[
    //用来加载loader【loader是用来打包其他文件格式的】
   ]
}
}

三.lodash配置

一、css部分

  • 需要下载两个loader

    ​ npm i css-loader style-loader

    ​ 在main.js中引入css 依赖

    ​ require（./name.css） //一定加入./否则会报错

    如果需要可以安装less-loader或者sass-loader

//在webpack.config.js中添加以下
module: {
   rules: [{
     test: /\.css$/,
     use: [
         //webpack在使用多个loader时，是从右向左的，从下到上的
      {
        loader: "style-loader"//负责把样式添加到dom中
      },
      {
        loader: "css-loader"//只负责css文件的加载
      }
    ]
     }]
}

//    需要注意css 在HTML中的引入，需要output配合 
output: {
  filename: '[name].js',
  path: path.resolve(__dirname, '../dist'),
  publicPath: '/'
},
二、HTML
  • 需要下载三个loader

​ npm i file-loader html-loader extract-loader

config/webpack.dev.js
var path = require('path')  //node系统模块
 
module.exports = {  //暴露
entry: {   //入口文件
main: './src/main.js'
},
mode: 'development',  //开发模式 可使用production生产模式进行替换
output: {      //输出
filename: '[name].js',   //输出时文件名
path: path.resolve(__dirname, '../dist'),   //commonJs提供 文件名    -》输出路径
publicPath: '/'     //   html中的引入文件路径
},
devServer: {    //热跟新
contentBase: 'dist',    //服务器指向文件名。类似node中的静态资源加载
overlay:true //报错显示到浏览器
},
module: { //loader配置
rules: [{
test: /\.css$/,   // 正则css
use: [{
loader: "style-loader"   //渲染
},
{
loader: "css-loader"    //压缩
}
]
},
{
test: /\.html$/,  //正则 所有的html
use: [{
loader: "file-loader",  //文件输出
options: {  //名字
name: "[name].html"
}
},
{
loader: "extract-loader"  //与main.js分离，打包成一个独立的文件
},
{
loader: "html-loader",  //渲染，压缩
options: {
attrs: ["img:src"]
}
}
]
}
 
}
src/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
 
</head>
<body>
<div id="box">
 
</div>
</body>
<script src="/main.js"></script>

</html>

main/main.js代码

//依赖
requrie（'./main.css'）
requrie（'./html.css'）
三，图片

npm install file-loader --save-dev

npm install url-loader --save-dev

url-loader内置了file-loader，一般只需要安装url-loader即可，但是当加载的图片转化成base64时，limit后的值小于图片的大小时候，就需要下载file-loader

//file-loader
{
test: /\.(jpg|git|png)$/,   //图片
use: [{
loader: "file-loader",
options: {
name: "[name]-[hash:8].[ext]"  //压缩为一个名字8位哈希值的图片，[ext]表示扩展名
}
}]
}

//url-loader
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,//当图片小于limit值的时候，就会把图片编译成base64字符串的形式
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}

四、webpack实现vue开发环境的搭建

webpack.config.js
var path = require('path')  //node系统模块，用于动态获取路径
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //vue-loader 伴生插件 
module.exports = {  //暴露
entry: {   //入口文件
main: './src/main.js'
},
mode: 'development',  //开发模式 可使用production生产模式进行替换
plugins: [
    new webpack.BannerPlugin("最终版权归Snyu.L所有") //做版权声明；打包后bundle.js文件头部就会显示
new VueLoaderPlugin()   //vue-loader的VueLoaderPlugin
],
output: {      //输出
filename: '[name].js',   //输出时文件名
path: path.resolve(__dirname, '../dist'),   //commonJs提供 文件名    -》输出路径
publicPath: '/'     //   html中的引入文件路径
},
devServer: {    //热跟新
contentBase: 'dist',    //服务器指向文件名。类似node中的静态资源加载
overlay:true //报错显示到浏览器
},
resolve: {    //引入vue.js
alias: {
'vue$': 'vue/dist/vue.js'
}
}, 
module: { //loader配置
rules: [{
test: /\.css$/,   // 正则css
use: [{
loader: "style-loader"   //渲染
},
{
loader: "css-loader"    //压缩
}
]
},
{
test: /\.html$/,  //正则 所有的html
use: [{
loader: "file-loader",  //文件输出
options: {  //名字
name: "[name].html"
}
},
{
loader: "extract-loader"  //与main.js分离，打包成一个独立的文件
},
{
loader: "html-loader",  //渲染，压缩
options: {
attrs: ["img:src"]
}
}
]
},
{
test: /\.(jpg|git|png)$/,   //图片
use: [{
loader: "file-loader",
options: {
name: "[name]-[hash:8].[ext]"  //压缩为一个名字8位哈希值的图片
}
}]
},
{
test: /\.vue$/,   //压缩vue
use: [{
loader: "vue-loader"  //压缩vue的loader
}],
exclude: '/node_modules/'    // 排除压缩的文件
}
]
}
 
}
dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
 
</head>
<body>
<div id="box">
<app></app>
</div>
</body>
<script src="/main.js"></script>
 
</html>
src/app.vue
<template>
<div>
我是{{a}}  
</div>
</template>
 
 
<script>
export default {
name: 'app',
data:function(){
return {
a:'小渣渣'
}
}
}
</script>
 
 
<style>
 
</style>
ser/main.js
 import Vue from 'vue'
 import app from "./app.vue"
 
new Vue({
   el:'#box',
    components:{
    app
    }
   }
 
)

五.es6的语法处理

如果将es6的语法转化成es5的语法时，我们就需要babel

npm i --save-dev babel-loader@7 babel-core babel-preset-es2015

//配置方法
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']//转化成2015的只需要写成['es2015']
        }
      }
    }
  ]
}

六.搭建Vue项目

1.先下载指定版本的vue，通过npm下载 ：npm install vue -save

2.在main.js进行引入vue,在index.html中用

import Vue from "vue"
const app = new Vue({ //new Vue()
el:"#app",
data:{message:""},
})

//index.html
<div id="app"> <h1>{{message}}</h1></div>

//抽离成组件
//index.html
<div id="app"></div>

//app.vue,单独写一个app.vue放组件
<script>
export default {
    template:"<div></div>",
    data(){
        return{
            message:""
        }
    }
        methods{
            btn(){
                
            }
        }
}
</script>
//main.js
import Vue from "vue"
import App from "./vue/app.vue"
new Vue({
    el:"#app",
    template:"</App>",
    components:{App}
})

**注意：需要安装加载app.vue的npm方可实现编译

 npm i  vue-loader(注意版本或许会报错无法运行)   vue-template-compiler  --save-dev  //用于开发时依赖，最后上线打包后都会把template
     
    //webpackconfig.js中配置
rules:[
    ......
    {
      test:/\.vue$/ ,
        use:["vue-loader"]
    }
]
3.注意vue有两个版本一个版本是不支持有template模板的
  • runtime-only 代码中不可以有任何的template
  • runtime-compiler 代码中可以有template，因为compiler可以用于编译template

runtime-compiler 转义方式就是

先由模板template -->解析成ast（抽象语法树）–>转成render函数–> 虚拟dom ( vdom)–>ui

runtime-only 转义方式就是（性能更高 ，代码量更少，相对比runtime-compiler少6kb）

先由模板template–> 虚拟dom ( vdom)–>ui

4.综上所述需要指定版本方可使用，在webpack.config.js中配置

module.exports: {
	.....
    resolve:{
        //alias:取别名
        alias:{
            "vue$":"vue/dist/vue.esm.js"  //import Vue from "vue"引入的时候会去vue中找													//vue.esm.js这个版本，
        }
    }
}

七、打包html的plugin

1.目前我们的index.html是存放在根目录中的，在发布项目时候是在dist文件中的，但是如果没有index.html文件那么打包就没有意义；需要使用到插件HtmlWebpackPlugin插件：它可以让我们自动生成一个index.html的文件插入到body中

npm install html-webpack-plugin  --save-dev
//需要在webpack.config.js中配置
cosnt htmlwebpackplugin  = require("html-webpack-plugin")
plugins:{
    ....
    new htmlwebpackplugin({
        template:"index.html"//使用什么模板存放index.html
    })
}

八、js压缩的Plugin（丑化打包，开发阶段不需要，上线时候需要压缩）

npm i uglifyjs-webpack-plugin@1.1.1 - save-dev
//需要在webpack.config.js中配置
cosnt uglifyjsplugin  = require("uglifyjs-webpack-plugin")
plugins:{
    ....
    new uglifyjsplugin()
}

九、搭建本地服务器

npm i -save-dev webpack-dev-server@2.9.1

//需要在webpack.config.js中配置
devServer:{
    contentBase:"./dist",
        inline:true
}

//也可以在json中配置
"dev":"webpack-dev-server --open"   //直接打开服务器，打开本地服务npm run dev
Snyu.L
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Webpack配置.docx
05-15
记住，Webpack配置是高度可定制的，可以根据项目需求进行调整。随着项目的复杂性增加，你可能需要配置更多插件和loader来处理不同的资源和需求。始终关注Webpack文档和社区的最佳实践，以保持配置的最新性和高效性。
webpack之webpack.config.js配置
热门推荐
chen4565的博客
06-21 2万+
webpack之webpack.config.js配置 wbepack.config.js webpack的配置文件详解: ​ 作用: 指示 webpack 干那些活(当你运行 webpack 指令时, 会加载里面的配置) ​ 所有构建工具都是基于node.js平台运行的~模块化默认采用commonjs, ​ 概念:我们创建的src文件是我们写项目的源代码,用的是ES6模块化 ​ 而wbepack.config.js文件是我们写配置的源代码,默认用的是commonjs  
webpack学习之webpack.config.js详解
朽木自雕的博客
02-06 6094
一、webpack基础配置 在项目根目录创建webpack.config.js 文件，只能是这个文件名 打开 webpack.config.js ，开始编写配置信息 // 输出模块 // __dirname是nodejs的一个全局变量，它指向当前执行脚本所在的目录。 module.exports = { entry: __dirname + "/src/index.js"...
添加webpack.config.js配置
csucoderlee的专栏
05-20 395
所以，在前面的博客中，我们初始化了一个空的项目，当执行webpack打包时，需要先手动在src目录下创建一个index.js文件，这样在执行npm run build后，在dist的目录下生成了一个main.js文件，这个也验证了上面零配置打包规则的第1点和第2点。上述配置，指定了入口文件，同时指定了dist文件夹下输出的文件名为bundle.js，执行npm run build，会看到在dist文件下多了一个bundle.js文件。
浅谈webpack的重要功能——Plugins
筱葭的博客
04-03 1万+
webpack中另一个非常重要的功能是Plugins。 插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务。 Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西：Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个;插件并不直接操作单个文件，它直接对整个构建过程其作用。 webpac
webpack入门(二):配置webpack.config.js
An_Cool_bree的博客
06-08 2103
webpack.config.js文件中，主要包括 entry:入口文件 output:出口文件 module:模块 plugins:插件
webpack.config.js(详解)
山海也有意难平
08-05 3283
module.exports = { publicPath: './',//设置的就是域名根目录到项目文件根目录间的url。 outputDir: 'motorway',//打包后生成的文件目录名 assetsDir: 'static',//静态资源目录 lintOnSave: process.env.NODE_ENV === 'development',//设置是否在开发环境下每次保存代码时都启用 eslint验证。 productionSourceMap: false,//设置是否.
webpack配置文件.zip
04-15
自动构建vue脚手架的webpack配置文件，包括三个文件package.json、package-lock.json、webpack.config.js，使用说明在文件里面的webpack.config.js里面，
Webpack：Webpack配置
02-19
在深入Webpack配置之前，我们需要了解Webpack的基本工作原理。Webpack 把项目视为一个由多个模块组成的整体，这些模块可以通过导入（import）和导出（export）相互引用。Webpack 将这些模块通过“loader”进行转换，...
webpack.config.js基础配置（五大核心属性）
jieyucx的博客
06-07 1491
在上一节中我们在安装完webpack 和 webpack-cli依赖之后，直接通过的方式对src下的js文件进行了打包。其中的: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。--mode=xxx：指定模式（环境）。就是webpack的打包入口文件，是指定打包的模式，这些东西其实我们可以在webpack.config.js中配置，配置好了之后，我们只需要执行就能打包了，不用那么长的命令。
webpack详细安装以及webpack.config.js配置，package.json配置
qq_48770086的博客
05-26 2908
webpack详细安装以及webpack.config.js配置，package.json配置
webpack : webpack.config.js 配置文件(一)
weixin_43801564的博客
06-03 2291
webpack.config.js是启动webpack的配置文件,遵循nodejs的commonJS规范,使用require引入模块,并最终通过module.exports导出配置,实际上就是一个nodejs文件. 1.启动方式 webpack默认使用同目录下的webpack.config.js文件,也可以自定义指定文件位置 在package.json文件中配置: "scripts": { "build:dev":"webpack --config ./src/webpack.config.de.
Webpack配置全解析（基础篇）
2401_84435152的博客
04-29 2006
我们也可以在项目目录新建一个html引入打包后的bundle.js文件查看效果。配置文件命令行的打包方式仅限于简单的项目，如果我们的项目较为复杂，有多个入口，我们不可能每次打包都把入口记下来；因此一般项目中都使用配置文件来进行打包；
Webpack配置详解（package.json/webpack.config.js详细配置 ）
时清云的博客
12-17 9524
Webpack配置详解（package.json/webpack.config.js详细配置 ） webpack安装 package.json配置以及模块安装 webpack.config.js配置 开启webpack-dev-server服务 热替换插件的安装以及配置 开启自动打开浏览器插件的安装以及配置 加载器的安装以及配置 完整package.json/webpack.config.js文件...
安装Webpack/配置webpack.config.js
weixin_44884546的博客
08-02 546
Webpack 一、市面上有哪些类似于Webpack的前端工程化工具【 自动化工具 】 grunt gulp ( 4.x ) Browserify ( Webpack 前身 ) Webpack 【 主流行 】 rollup.js https://www.rollupjs.com/guide/zh 【 小众 】 parcel 【 小众 】 FIS https://fis.baidu.com/...
webpack.config.js配置
rufeike的博客
01-02 1535
webpack.config.js配置 主要用于代码打包，使用各种loader，由于webpack只能处理js文件，需要处理其他类型文件时，需要使用各种loader进行处理，再进行webpack打包 注意：loader执行顺序会影响打包结果 安装 全局安装，webpack安装需要同时安装webpack-cli $ npm install webpack webpack-cli -g we...
Webpack--入门只看这一篇就够了(图文＋代码）
最新发布
weixin_46714216的博客
07-28 1115
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。
webpack 配置详解
05-29
Webpack 的配置文件是一个 JavaScript 模块，它需要导出一个对象。在配置文件中，你可以指定入口文件、输出路径、模块解析规则、插件等等。 以下是一个简单的 Webpack 配置示例： ``` const path = require('path'...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值