webpack，列出版本报错问题，错误形式多种多样。

最新推荐文章于 2023-08-23 22:46:44 发布

～东北大呲花～

最新推荐文章于 2023-08-23 22:46:44 发布

阅读量987

点赞数

分类专栏：前端小白文章标签： javascript html html5 vue.js webpack

本文链接：https://blog.csdn.net/Da_ci_hua/article/details/121432642

版权

webpack安装

webpack依赖node环境, node环境为了可以正常执行很多代码, 必须包含各种依赖的包,npm工具是为了管理包。

// node官网下载就行了

// 查看node版本  
npm -v  

// 全局安装webpack  (指定版本)
nom install webpack@3.6.0 -g

// 局部安装webpack  
// --save-dev 是开发时依赖, 项目打包后不需要继续使用
cd 对应目录
npm install webpack@3.6.0 --save-dev


// 查看webpack安装版本
webpack -v

这里我要提醒一下，如果安装webpack1,2,3按照百度上的教程应该不会有问题，但是如果安装最新版本的那就要注意了

先执行

npm insatll --save-dev webpack

分别依次执行


                npm install --save-dev webpack-cli
                npm install --global webpack
                npm install --global webpack-cli

执行 webpack -v 出现版本号说明安装成功了。

遇到的错误问题或提示等

第一个问题

You have installed webpack-cli and webpack-command together.
 To work with the "webpack" command you need only one CLI package,
  please remove one of them or use them directly via their binary.

意思是：

您已经安装了webpack-cli和webpack-command。要使用“webpack”命令，
您只需要一个CLI包，请删除其中一个或直接通过二进制文件使用它们。

这个时候可以执行

npm remove  webpack-cli 
或者 npm remove webpack-command    
不行的话试试 npn remove --global webpack-cli

webpack配置

这是没有用webpack.config.js 文件获得打包路径的打包方法，很麻烦。
在这里插入图片描述

创建: webpack.config.js 文件

// 为了动态获取打包后的路径, path 在node包里面 -- 看下面一段代码 装包
const path = require('path')

module.exports = {
   
    entry: './src/main.js', // 要打包的文件
    output: {
   
        path: path.resolve(__dirnmae, 'dist'), // 打包后的文件  要写绝对路径--动态获取路径
        filename: 'bundle.js'
    }
}

node装包

// 初始化--生成
npm init

// 生成的文件可能有中文 / 符号  可以改名 
meetwebpack 

... 后面全部回车, 一路通过. yes就行  如果输入OK,会报Aborted.的错误
... 生成 package.json文件

// package.json文件里面也有依赖的文件

package.json文件

"version" -- 版本号  

// 本地安装webpack (之前是全局安装)  -- 开发时依赖  运行时依赖
npm install webpack@3.6.0 --save-dev

// 开发时依赖 (本地安装webpack后, 重新打开package.json文件会出现)
"devDependencies": {
     
    "webpack": "^3.6.0"  
}

// 使用vue之后, 会有 (运行时依赖)
"dependencise": {
   
    "webpack": "^3.6.0"  
}

---

// 执行脚本的配置
"scripts": {
   
    "test": '',    
    "build": "webpack" 
}

npm run test
npm run build

webpack手动配置webpack.config.js文件，打包时出现的报错，可以试试这种解决方案

报错如下：

No configuration file found and no output filename configured via Cli option.
A configuration file could be named 'webpack.config.js' in the current directory.
Use --help to display the CLI options.

在打包时，报错

想要解决这个问题，很简单，把webpack.config.js放到项目的根目录文件上，就可以解决了，

webpack配置的loader

默认webpack只会处理js代码，所以当我们想要去打包其他内容时，让webpack处理其他类型的内容，就要使用相应的loader。

用法
1.安装
你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

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

2.在配置文件中（我的是webpack.config.js）加入module属性，该属性是一个对象,在这个属性中有一个rules字段。

const path = require('path')
//common.js导入
module.exports = {
   
    entry: './src/main.js',
    output: {
   
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
   
        rules: [

            {
   
                test: /\.ts$/,
                use: 'style-loader'
            },
            //style 一定要在css前面，从下往上执行的
            {
   
                test: /\.css$/,
                use: 'css-loader'
            },
            {
   
                test: /\.ts$/,
                use: 'ts-loader'
            },
        ]
    }
}

注意
在main.js中引入css时路径要加上**!style-loader!css-loader!**

require("!style-loader!css-loader!./css/body.css")

报的什么错我忘了，反正报了一晚上！！！！
第二天一看，不写也没啥事。后来样式又失效了，加上。
在这里插入图片描述

报这个错时，大多数原因是版本太高，降低版本即可

执行

npm install  --save-dev css-loader@2.1.0

再进行打包！！！！
打包less文件
.在配置文件中（我的是webpack.config.js）加入module属性，该属性是一个对象,在这个属性中有一个rules字段。

配置如下

const path = require('path')
    //common.js导入
module.exports = {
   
    entry: './src/main.js',
    output: {
   
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
   
        rules: [

            {
   
                test: /\.ts$/,
                use: 'style-loader'
            },
            {
   
                test: /\.css$/,
                use: 'css-loader'
            },
            {
   
                test: /\.ts$/,
                use: 'ts-loader'
            },
//这下面就是less配置了，记得顺序，很重要。
            {
   
                test: /\.less$/,
                use: 'style-loader'
            },
            {
   
                test: /\.less$/,
                use: 'css-loader'
            },
            {
   
                test: /\.less$/,
                use: 'less-loader'
            },
        ]
    }
}

如果未进行安装，请先安装

npm install --save-dev less-loader

对图片进行打包

以下分为两种形式：

1.图片大小小于8kb,(8192), limit: 8192用以下方法：
首先进行安装

npm install --sav-dev url-loader

.在配置文件中（我的是webpack.config.js）加入module属性，该属性是一个对象,在这个属性中有一个rules字段。
配置如下：

const path = require('path')
    //common.js导入
module.exports = {
   
    entry: './src/main.js',
    output: {
   
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'，
        //以后只是涉及到的url路径都会加上下面这段路径
        publicPath: 'dist/'
    },
    module: {
   
        rules: [

            {
   
                test: /\.ts$/,
                use: 'style-loader'
            },
            {
   
                test: /\.css$/,
                use: 'css-loader'
            },
            {
   
                test: /\.ts$/,
                use: 'ts-loader'
            },

            {
   
                test: /\.less$/,
                use: 'style-loader'
            },
            {
   
                test: /\.less$/,
                use: 'css-loader'
            },
            {
   
                test: /\.less$/,
                use: 'less-loader'
            },
            {
   
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [

                    {
   
                        loader: 'url-loader',
                        options: {
   
                            //当加载的图片，小于limit时，会将图片编译成base64字符串形式
                            //当加载的图片，大于limit时，会使用file-loader模块进行加载
                            //8192默认为8Kb

                            limit: 8192,
                            // 下列语句为固定句式，写在options里面，外面会报错，</

最低0.47元/天解锁文章

～东北大呲花～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack，列出版本报错问题，错误形式多种多样。

webpack安装这里我要提醒一下，如果安装webpack1,2,3按照百度上的教程应该不会有问题，但是如果安装最新版本的那就要注意了先执行npm insatll --save-dev webpack分别依次执行 npm install --save-dev webpack-cli npm install --global webpack npm install --global webpack-
复制链接

扫一扫