webpack的最新版本配置流程（小白向，从安装node开始）

2021-05-05 13:00:23 阅读：270 来源： 互联网

标签：node less 小白 js webpack test loader css

1.首先当然是安装node.js啦（点击此处下载）
奇数版本是开发版本，偶数版本是稳定版本，推荐下载12.x或14.x（文件后缀为msi）。
node安装过程中只需要改下安装路径（当然不改也可以），其余一路next就行。
安装完成之后在DOS中通过node -v来查看，若显示有版本号即成功
在这里插入图片描述
2.创建一个空文件夹(我创建的是webpackdemo)
我这里用的是是vscode，进入创建的文件夹cd .\webpackdemo\。
注意进入vscode时右键以管理员身份运行或在终端中输入以下指令开启管理员权限，不然接下来会报错：

Set-ExecutionPolicy -Scope CurrentUser
RemoteSigned

3 初始化
输入npm init,然后就是当出现package name: (webpackdemo)时输入一下你想写的名字，然后一路enter，文件夹中就会出现一个文件package.json,里面的内容就是刚才你写的配置，name是你设置的其余的是自动生成的。

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

4.安装webpack

全局安装

npm install webpack webpack-cli -g

本地安装

npm install webpack webpack-cli --save-dev

这里由于我们的项目不发布就只进行本地安装，安装完成之后，会多出一个node_modules文件夹和一个package-lock.json文件，同时package.json中会多出webpack和webpack-cli的版本号。

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.36.2",
    "webpack-cli": "^4.6.0"
  }
}

通过在终端输入webpack -v查看是否安装成功，出现以下即为成功

webpack 5.36.2
webpack-cli 4.6.0

5.创建文件目录结构

创建dist目录：该目录为模块编译输出目录
创建src目录：该目录为存放各个模块的目录
在src目录下创建index.js文件，其为模块编译的入口
直接在终端输入webpack，若dist目录下出现main.js即webpack运行正常。

出现以下警告为正常情况：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

6 自定义配置
当前的webpack已经不需要配置，但自定义的配置更加好用。
创建webpack.config.js文件，注意：文件名不能错
此时的文件目录为：
在这里插入图片描述
修改webpack.config.js为如下所示：

const path = require('path');

module.exports = {
    entry: "./src/index.js", //模块编译的入口，即为之前写的index.js
    output: {
        path: path.resolve(__dirname,'dist'), //模块编译输出路径
        filename: 'bundle.js', //输出文件名字
    },
    mode: 'development', //解决上面所说的的警告，即指定为开发模式
}

再次输入webpack,出现以下即说明配置文件没有错误

asset bundle.js 1.18 KiB [emitted] (name: main)
./src/index.js 1 bytes [built] [code generated]
webpack 5.36.2 compiled successfully in 128 ms

7 配置各种loader

(1) 下载style-loader和css-loader

下载style-loader

npm install --save-dev style-loader

在webpack.config.js中加入如下配置：

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

下载css-loader

npm install --save-dev css-loader

其配置与上面的style为同一个，不需要重复配置

（2）less-loader

npm install less less-loader --save-dev

在webpack.config.js中加入如下配置：

{
  test: /\.less$/i,
  use: ["style-loader","css-loader","less-loader"]
}

我原先根据官网写的，但是莫名其妙一直报错，写成上面这样就可以了。
写个css和less测试下
common.css:

body{
    background-color: yellow;
}

special.less

body{
    color: red;
    font-size: larger;
}

在index.js中引用：

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

这里可以添加脚本：

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.4",
    "less": "^4.1.1",
    "less-loader": "^8.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.36.2",
    "webpack-cli": "^4.6.0"
  }
}

终端输入npm run dev,测试结果为：
在这里插入图片描述
(3) 处理image的url
新版本已经废除了url-loader和file-loader等加载器
这里需求为将网页背景设置为一张图片
在webpack.config.js中加入如下配置：

{
  test: /\.jpg/,
  type: 'asset/inline'
},
{
test: /\.png/,
type: 'asset/resource'
}

第一个编译.jpg文件，其较小，直接通过base64编码内联到web网页
第二个编译.png文件，即较大，编码后默认输出到dist文件夹下

commom.css修改为：

body{
    background-color: yellow;
    background: url(../../img/test.jpg);
}

special.less修改为：

body{
    color: red;
    font-size: larger;
    #app{
        background: url(../../img/8705.png);
    }
}

再次输入npm run dev，结果为：
在这里插入图片描述
我的目录结构为：

webpack.config.js完整为：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'), //模块编译的入口，即为之前写的index.js
    filename: 'bundle.js', //编译输出文件的名字
    assetModuleFilename: 'images/[hash][ext][query]'  //.png文件输出的路径
  },
  mode: 'development', // 解决前面的警告问题，即设置开发模式
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"]
      },
      {
        test: /\.jpg/,
        type: 'asset/inline'
      },
      {
        test: /\.png/,
        type: 'asset/resource'
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-object-rest-spread']
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

标签：node,less,小白,js,webpack,test,loader,css
来源： https://blog.csdn.net/m0_50848481/article/details/116422767

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack的最新版本配置流程（小白向，从安装node开始）