webpack使用

最新推荐文章于 2024-04-25 23:32:41 发布
最新推荐文章于 2024-04-25 23:32:41 发布
阅读量390 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44495678/article/details/110167884
版权

一、安装webpack
首先安装node（点击详情），再安装webpack，命令如下：

npm install webpack@3.6.0 -g
webpack -v

二、webpack使用CSS文件，步骤如下：
1、编写CSS文件
2、在main.js中引用

require('./css/normal.css')

3、安装配置
css-loader和style-loader
style-loader将模块的导出作为样式添加到 DOM 中,css-loader加载CSS 文件;
使用多个loader，按照从右往左读取;
1> 安装

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

2> 在webpack.config.js中添加配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

4、打包

npm run build

出现如下错误(1)：

UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function
    at Object.loader.

在这里插入图片描述
版本过高，卸载重新安装即可！！

npm uninstall css-loader
npm install css-loader@2.0.2 --save-dev

三、webpack使用less文件，步骤如下：
1、编写less文件
2、在main.js中引用

require('./css/special.less')

3、安装配置
1> 安装

npm install --save-dev less-loader less

2> 在webpack.config.js中添加配置

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

4、打包
出现如下错误(2)：

nhandledPromiseRejectionWarning: TypeError: loaderContext.getResolve is not a function
    at createWebpackLessPlugin

在这里插入图片描述
版本过低，卸载重新安装即可！！

npm uninstall less-loader
npm install less-loader@5.0.0 -D

四、webpack使用less文件，步骤如下：
1、编写CSS文件中添加图片
2、在main.js中引用

require('./css/normal.css')

3、安装配置
1> 安装

npm install --save-dev url-loader

2> 在webpack.config.js中添加配置

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

当加载图片小于limit时，会将图片编译成base64字符串形式;当加载图片大于limit时，需要安装file-loader加载，如下配置：
a、安装file-loader

npm install --save-dev file-loader

b、在webpack.config.js中添加如下配置：
在这里插入图片描述

4、打包
延伸：图片打包后名字为32位编码，若想图片与打包前名字一致，在webpack.config.js中添加如下配置：
在这里插入图片描述
五、webpack使用Vue，步骤如下：
1、安装Vue

npm install vue --save

2、编写.Vue文件

<template>
  <div>
    <h3 class="lsw">{{message}}</h3>
    <button @click="btnClick">按钮</button>
    <h4>{{name}}</h4>
  </div>
</template>

<script>
export default {
name: "app",
  data(){
    return {
      message:'独爱空城梦',
      name:'梁尚武'
    }
  },
  methods:{
    btnClick(){
    }
  }
}
</script>

<style scoped>
.lsw {
  color: blue;
}
</style>

3、在main.js中引用Vue

import App from './vue/app'
new Vue({
  el:'#app',
  template:'<App/>',
  components:{
    App
  }
})

4、打包运行
延伸：省略扩展名，在webpack.config.js中添加如下配置：
在这里插入图片描述
如下错误(3):
在这里插入图片描述
解决方法：
在webpack.config.js中添加如下配置：
在这里插入图片描述
六、webpack配置plugin
plugin使用过程：（1）通过npm安装需要使用的plugin；（2）在webpack.config.js中的plugin中配置插件。
(一)、HtmlWebpackPlugin插件作用：自动生成一个index.html文件，即用于打包html，步骤如下：
1、安装html-webpack-plugin

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

2、在webpack.config.js中添加如下配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')
....
module.exports = {
plugins:[
      new HtmlWebpackPlugin({
        template:'index.html'
      }
  }

3、打包运行
出现如下错误(4)：

Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

在这里插入图片描述
解决方法：执行下面命令，将局部wepack指向全局wepack

npm link webpack --save-dev

继续打包，又出现错误(5)：

TypeError: Cannot read property 'make' of undefined

在这里插入图片描述
html-webpack-plugin插件版本兼容的问题
解决方法：在package.json中修改版本：

"html-webpack-plugin": "^3.2.0",

并执行如下命令：

npm install

(二)、uglifyjs-webpack-plugin插件作用：对打包的js文件进行压缩，对js文件进行丑化，步骤如下：
1、安装uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

2、在webpack.config.js中添加如下配置：

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
....
module.exports = {
plugins:[
      new UglifyjsWebpackPlugin()
  }

3、打包运行，结果如下(js文件)：
在这里插入图片描述
七、webpack搭建本地服务器
该服务器基于node.js，内部使用express框架，让浏览器自动刷新，步骤如下：
1、安装webpack-dev-server

npm install webpack-dev-server@2.9.3 --save-dev

2、在webpack.config.js中添加如下配置：

module.exports = {
devServer:{
    contentBase:'./dist',   //为哪一个文件夹提供服务，默认（跟文件夹）
    inline:true  //页面实时刷新
  }

3、在package.json文件中配置：
在这里插入图片描述
4、运行

npm run dev

八、webpack配置文件的分离
项目结构：
在这里插入图片描述
1、安装merge

npm install webpack-merge --save-dev

2、配置文件
(1)base.config.js

//  定义导出模板的入口和出口
const path = require('path');
// const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname,'../dist'),//动态获取绝对路径
    filename: 'bundle.js',
    // publicPath: 'dist/'   //  加载与url相关内容
  },
  module:{
    rules: [
      {
        test: /\.css$/,
        //style-loader将模块的导出作为样式添加到 DOM 中,css-loader加载CSS 文件
        //使用多个loader，按照从右往左读取
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 35000,
              //  图片打包后命名
              // name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test:/\.vue$/,
        use:['vue-loader']
      }
    ]
  },
  resolve:{
    extensions:['.js','.vue','.css'],  //省略扩展名
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    }
  },
  plugins:[
    // new webpack.BannerPlugin('最终版权归XQ所有')
    new HtmlWebpackPlugin({
      template:'index.html'
    })
  ]
}

(2)dev.config.js

const  webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

//  搭建本地服务器
module.exports = webpackMerge.merge(baseConfig,{
  devServer:{
    contentBase:'./dist',   //为哪一个文件夹提供服务，默认（跟文件夹）
    inline:true  //页面实时刷新
  }
})

(3)prodconfig.js

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const  webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge.merge(baseConfig,{
  plugins:[
    new UglifyjsWebpackPlugin()
  ]
})

3、在package.json文件中配置：
在这里插入图片描述
4、运行
执行该指令(npm run dev)出现如下错误(6)：

webpack-dev-server not working Cannot find module '../lib/polyfills'

解决方法：
执行如下指令：

rm -rf node_modules 
npm install

继续执行该指令，出现错误(7)：

TypeError: webpackMerge is not a function

在这里插入图片描述
在这里插入图片描述
解决方法：
报错提示说WebpackMerge不是一个函数，此时它会不会是一个对象或者类，于是进行如下修改：
在这里插入图片描述

深巷的猫~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack使用Vue学习案例
08-25
webpack使用vue
webpack使用方法说明
11-18
webpack使用方法说明
Error: Cannot find module ‘webpack‘ 问题解决办法
忧郁的海风
06-26 6856
所以要全局安装 npm install --save-dev webpack。就算之前你装了webpack，那肯定是非全局安装。这句话的意思是：没有找到webpack模块。
es6 es7 polyfill 语法支持
qq2276031的博客
06-30 446
const { resolve } = require('path') const r = path => resolve(__dirname, path) // cnpm i babel-core babel-preset-stage-3@6.24.1 babel-preset-latest-node@0.2.2 babel-polyfill -D // latest-node 0.2.2 版本正常使用 // node 问题: Cannot find module 'babel-core/reg.
(掌握)webpack的less文件处理
最新发布
小余的前端博客
04-25 155
我们配置的时候除了写less之外，我们还写了css跟style是因为，less-loader只是将less语法转化成css语法，但是css语法还得进行处理的，使用css的loader处理css语法，最后使用style的loader将其引入使用。但是在项目中我们会编写大量的css，它们如何可以自动转换呢？配置webpack.config.js。刚刚rules里面的。
UnhandledPromiseRejectionWarning: Error: Cannot find module‘‘@tarojs/plugin-platform-weapp‘ from
weixin_45663264的博客
07-05 1905
版本号太高了 npm install -g @tarojs/cli@1.2.26 切换版本 就可以了
nodejs express 启动报错:Error: Cannot find module 'xxx'
weixin_34018169的博客
01-08 1479
nodejs express 启动报错:Error: Cannot find module 'xxx'，这是因为缺少模块的引用。 比如我在代码中使用了'express-session'，但是却没有在package.json 文件的"dependencies" 项中添加'express-session' 的依赖 D:\nodejs\myapp&gt...
Webpack使用培训.pptx
08-23
1111
webpack使用介绍
04-04
webpack使用介绍 webpack使用介绍 webpack使用介绍 webpack使用介绍
webpack使用ParallelUglifyPlugin实例
04-17
webpack使用ParallelUglifyPlugin实例webpack使用ParallelUglifyPlugin实例webpack使用ParallelUglifyPlugin实例webpack使用ParallelUglifyPlugin实例
Error: Cannot find module '../lib/utils/unsupported.js'
冷胜任 的专栏
03-25 1万+
重新安装node.js 后npm 被能使用（如下面） 是因为安装的node.js 9.9.0 不是稳定版本 sudo n stable //指定个稳定版本即可 module.js:545 throw err; ^ Error: Cannot find module ‘../lib/utils/unsupported.js’ at Function.Mod...
Cannot find module 'semver' 错误
shrenk的专栏
12-27 1万+
新clone一个spfx的项目，运行npm install 安装依赖包成功，但是在gulp serve的时候出现了“Cannot find module 'semver'"的错误。 Error message: module.js:550 throw err; ^ Error: Cannot find module 'semver' at Function.Modu...
vue动态路由加载时 Cannot find module xxx 错误解决方法
热门推荐
知行合一
06-01 5万+
vue由静态路由改为动态路由时，出现下面的错误 静态路由懒加载，当我们把在router里面，把它写死在ts里时，它加载的ok的，可是我们通过api接口拉取过来的数据时，发现是不报了上面的错 // 静态路由懒加载 export const loadView = (view: any) => { return () => import(`@/views/${view}.vue`) } 错误原因是webpack打包逻辑，webpack4中动态import不支持变量方式，查看路由返回的信息，只是
webpack处理样式资源（css less sass scss）
jieyucx的博客
06-07 1464
本身是不能识别样式资源的，所以我们需要借助Loader来帮助解析样式资源。
webpack-less文件的处理，涨姿势了
m0_57473261的博客
03-21 452
其次，修改对应的配置文件添加一个rules选项，用于处理.less文件使用对象（Object）的形式传递 options 给 Less。
Webpack的概念和基本使用
weixin_60524655的博客
05-14 1511
1、webpack的概念 一、什么是webpack 概念：webpack 是前端项目工程化的具体解决方案。 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性 能优化等强大的功能。 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的 二、webpack有四个核心概念 入口(entry)：口起点(ent...
webpack的基本使用和配置
weixin_44947339的博客
08-16 1514
什么是Webpack？ 官方解析：从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 webpack安装 安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm 查看自己的node版本： node -v 全局安装webpack(指定版本号3.6.0，因为vue cli2依赖该版本) npm install webpack@3.6.0 -g 一、简单一个webpack项目 1、手动创建以下文件 dist文件夹：用于存放之后打包的文件 src
webpack使用教程
07-28
以下是一个简单的Webpack使用教程： 1. 安装Webpack：首先，你需要在你的项目中安装Webpack。你可以使用npm或yarn来安装Webpack。在命令行中运行以下命令来进行安装： ``` npm install webpack webpack-cli --...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值