webpack基本操作及常见问题

最新推荐文章于 2023-08-29 14:43:59 发布

1270015249-jmy

最新推荐文章于 2023-08-29 14:43:59 发布

阅读量485

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_47150940/article/details/108207575

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于webpack

webpack基本操作
webpack常见错误

webpack基本操作

Webpack概念

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

图解：
在这里插入图片描述
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

Webpack安装

使用 cnpm 安装 webpack：

cnpm install webpack -g  //全局

常规项目还是把依赖写入 package.json 包去更人性化：

$ cnpm init
$ cnpm install webpack --save-dev

webpack打包js文件

创建配置文件webpack.config.js,读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
   path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

index页面文件引用bundle.js

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

webpack设置

webpack-dev-server自动打包编译

使用webpack-dev-server工具实现代码自动打包编译，修改和保存任意源文件，web服务器就会自动重新加载编译后的代码。

运行cnpm install --save-dev webpack-dev-server将该工具安装到项目的本地开发依赖

在scripts节点下新增"dev": "webpack-dev-server"指令，运行npm run dev

新增"start": "webpack-dev-server --open --port 3000 --concentBase dist --hot"，运行npm start打开服务器。

参数：

–open 自动在浏览器中打开该端口地址，后面可跟浏览器名称，如firefox
–port 修改运行时的端口号
–host 修改运行时的域名，如127.0.0.1
–contentBase 设置托管的根目录，在浏览器中直接打开该路径下的.html文件
–hot 启动浏览器热更新，不会重新生成bundle.js，只会生成一个.js和.json补丁保存局部更新的代码，并实现浏览器的无重载异步刷新（对css等有效果，对js无效果）

html-webpack-plugin自动添加js入口文件

html-webpack-plugin，自动根据指定页面在内存中生成一个新页面之后，所有的打包好的bundle会自动添加到新页面的body底部。不再需要指定启动目录和手动处理bundle.js的引用路径。

cnpm install --save-dev html-webpack-plugin

/* webpack.config.js */
const path=require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
 
module.exports={
  plugins: [ //配置插件的节点
        new webpack.HotModuleReplacementPlugin(), //new一个热更新模块对象，启用更新的第三部
        new htmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),
            filename: "index.html" //指定内存中生成的页面的名字
        }),
        new vueLoaderPlugin()
    ],
}

webpack打包css文件

1、安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

cnpm install --save-dev style-loader css-loader

2、修改webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{},
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

3、在src文件夹创建style.css

body{
    background:pink;
}

4、修改main.js

在第一行引入style.css

import "./src/css/index.css"

webpack打包less和sass文件与打包css文件相同文件

webpack处理第三方文件类型（除了js之外的文件）的过程:

如果打包的文件不是js文件，则在配置文件中查找是否有对应的第三方的loader规则
如果没有，则cnpm下载，如果有，就调用loader规则处理第三方文件
调用loader时，是从后向前依次调用，以css举例，书写顺序为：{ test: /\.css$/, use: ['style-loader', 'css-loader'] },，调用顺序则为css-loader=>style-loader
当完成最后一个loader调用时，会把结果返回给webpack进行打包，最终输出

webpack打包图片

1.打包图片时我们需要file-loader。安装flie-loader

cnpm install --save-dev file-loader

2.配置webpack.config.js

  module:{
  rules:[
     {
         test: /\.(jpg|png|gif)$/,
         use: [{
              loader: 'url-loader',
               options: {
                  limit: 8000
              }
          }]
      }
    ]
  }
};

limit为图片的大小，单位是byte

当我们引用的图片大于设置的limit时，则不会被转换为base64
当我们引用的图片小于设置的limit时，则会被转换为base64

  module:{
  rules:[
     { test: /\.(jpg|png|gif|bmp|jpeg)$/, 
       use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }
    ]
  }
};

name：通过name属性改变图片的打包目录和文件名。
hash：图片经过处理后，会在输出文件夹中生成图片，此时图片的名字为hash。
ext：代表图片的格式。

webpack打包bootstrap

安装bootstrap-loader

npm install bootstrap-loader --save

如果安装完毕，提示有些依赖的loader没有安装，要把它们装上。

安装bootstrap
如果使用的是Bootstrap3

npm install bootstrap@3.3.7 --save

如果使用的是Bootstrap4

npm install bootstrap --save

js文件引入bootstrap

import "bootstrap/dist/css/bootstrap.css"

即可使用bootstrap，但使用bootstrap字体库时，需要在webpack.config.js中添加{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'file-loader' }

webpack中babel的设置

webpack中使用babel可以把 es6的代码转换在 es5的代码，来适应大多数的浏览器

1 安装 babel-loader babel-core

cnpm install --save-dev babel-loader babel-core

2.webpack.config.js 中配置

//这里解释一下 mode
//webpack4 中的 mode是必须配置的 
//  当mode:none 的时候，打包的代码不会进行任何优化；这样子打包出来的代码是不可用的
//  对于开发环境来说 这样的代码 阅读性不好
//  对于生产环境来说 代码太雍肿
//  所以，当mode: development 时，打包的代码 对开发比较友好
//  所以，当mode：production 时，打包的代码 简洁，压缩等好处
 
 
let path = require("path");  //引入 nodejs 的path 函数
 
module.exports = {
    mode:"none",    //model的值 development/production/none  分别是 development 开发模式                  
                    // production 生产模式   none 不做配置
    entry:{
        app:"./app.js"  //这里要使用相对路径
    },
    
    output:{
        path:path.resolve('./bundle/'),
        filename:"[name].bundle.[hash:5].js"
    },
    
    module:{
        rules:[
            {
                test:/\.js$/,       //匹配文件夹中后缀名是 .js的文件（注意这里不能加 引号）
                exclude:/node_modules/, //排除 node_modules 中的js文件（注意这里不能加引号）
                loader:"babel-loader"            //对匹配的 js文件用 babel来编译
            }
        ]
    }
 
}

3.webpack.config.js 中配置好后，要想使babel生效，则还要下一步安装 babel-preset-env

cnpm install babel-preset-env --save-dev

安装完成后在项目的根目录中新建 .babelrc 文件

{
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

注意：
babel-loader 和 babel-core 之间会有版本适配的问题

官方给出的是两个方案

webpack 4.x + babel-loader 8.x + babel 7.x （当babel-loader 的版本是8.x的时候相匹配的 babel为7.x）

cnpm install -D babel-loader @babel/core @babel/preset-env webpack

webpack 4.x + babel-loader 7.x + babel 6.x （当babel-loader 的版本是7.x的时候相匹配的 babel为6.x）

npm install -D babel-loader@7 babel-core babel-preset-env webpack

babel设置完成后，在index.js文件内：

class Person {
    static info = { name: "lisi", age: 20 }
}
console.log(Person.info)

则会在控制器打印info的内容

Webpack搭建vue

1 搭建vue环境

cnpm i vue vue-loader css-loader vue-template-compiler

2 处理webpack.congif.js

导出模块内添加如下内容：

resolve: {
        alias: {
            "vue$": "vue/dist/vue.js"
        }
    }

3 在index.js文件中引入vue

import Vue from 'vue'

4 在根目录下创建login.vue文件

<template>
    <div>
        <p>这是vue</p>
    </div>
</template>

5 在index.js中引入vue文件

import login from './login.vue'
var vm = new Vue({
    el: "#app",
    data: {},
    render: function(creatElement) {
        return creatElement(login)
    }
})

6 处理webpack.config.js文件

module: {
        rules: [ //配置所有第三方模块
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    },

webpack常见错误

常见错误1：
在这里插入图片描述
vue-loader是 15之后的版本，需要安装一个叫做 VueLoaderPlugin 的插件在终端输入指令 cnpm i vue-loader-plugin -S然后在webpack.config.js这个配置文件中进行相关的配置操作

const vueLoaderPlugin = require("./node_modules/vue-loader/lib/plugin")

module.exports = {
    //要打包的文件
    entry: path.join(__dirname, "index.js"),
    //打包出口文件
    output: {
        path: path.join(__dirname, "./dist"),
        filename: "bundle.js"
    },
    devServer: {
        open: true, //自动打开浏览器
        port: 3000, //设置端口
        contentBase: "src", //设置根目录
        hot: true //设置打包内容，只重新打包更改的内容  启动热更新
    },
    plugins: [ //配置插件的节点
        new webpack.HotModuleReplacementPlugin(), //new一个热更新模块对象，启用更新的第三部
        new htmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),
            filename: "index.html" //指定内存中生成的页面的名字
        }),
        new vueLoaderPlugin()  //一定要添加这个才可以运行
    ],