webpack安装_学习笔记-webpack基础配置

最新推荐文章于 2023-06-17 00:28:33 发布

weixin_39569076

最新推荐文章于 2023-06-17 00:28:33 发布

阅读量296

点赞数

文章标签： webpack安装 webpack打包命令 webpack配置查看webpack版本

0、概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

1、安装webpack

webpack网站文档： https://webpack.docschina.org/concepts

yarn add webpack -D 以开发依赖方式安装webpack

2、安装babel转义，支持es6、es7

网站：https://babeljs.io/

yarn add -g babel-cli 全局安装babel-cli，它是babel内置的一个cli，可通过命令行操作编译文件
babel -V 大写V，查看安装版本 6.26.0
npm install babel --save-dev 以开发依赖方式安装babel，负责编译
yarn add babel -D 以yarn命令安装babel，下同
npm install babel-core --save-dev 核心模块
npm install babel-loader --save-dev 编译模块
npm install babel-preset-es2015 --save-dev 预设（认识）支持es6
npm install babel-preset-stage-0 预设支持范围最大的es版本（es8），草案中都支持
npm install babel-preset-stage-1 范围较大
npm install babel-preset-stage-2 范围中等
npm install babel-preset-stage-3 范围较小
npm install babel-preset-stage-4 范围最小,完全定下来的版本
将命令合起来写：
yarn add babel babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 -D
注意：如果babel是@6.x版本，则babel-loader需要安装@7.x版本；babel-loader@8需要babel 7.x，两者要配套使用，否则报错。

3、配置.babelrc编译文件：

预设支持识别的es版本情况

{
  "presets": ["es2015","stage-0"]
}

4、安装解析css文件和style的模块：

npm install css-loader style-loader --save-dev 安装解析css文件和style的模块

5、安装解析less文件的模块：

npm install less less-loader --save-dev

6、安装(图片)文件解析、路径解析模块:

npm install file-loader url-loader --save-dev

7、安装html打包的插件：

npm install html-webpack-plugin --sava-dev

8、在项目的package.json配置文件中，配置指定的webpack命令，指定的命令叫build：

"scripts": {
    "build": "webpack"
  }

webpack打包的命令如下：

npm run build 打包时执行此命令用webpack对项目进行打包

实际上运行的是，当前项目下的node_modules文件夹下的，.bin文件夹下的webpack.cmd命令文件；

在webpack.cmd命令文件中，说明了，是以node为运行环境，以node命令，执行，当前项目下的，node_modules文件夹下的，webpack文件夹下的，bin文件夹下的webpack.js文件。

9、配置webpack.config.js文件：

let HtmlWebpackPlugin=require('html-webpack-plugin');
let path = require('path');
// 单入口文件
module.exports = {
    // 配置入口js文件：
    entry: './src/main.js',
    // 设置出口参数：打包后的文件名、输出的打包文件的绝对目录
    output: {
        filename: 'build.js', // 给打包后的js文件起的名字
        // 配置打包后build.js文件的路径，必须给绝对路径
        // path:__dirname+'/dist'
        path: path.resolve('./dist'), //绝对目录，与在哪里执行有关
    },
    // 设置模块的打包规则：
    module: {
        // 设置规则
        rules: [
            // 将后缀是.js的文件去使用babel-loader解析，注意排除node_modules中的js文件
            {test: /.js$/, use: ['babel-loader'], exclude: /node_modules/},
            // 后缀是.css的文件，用css-loader、style-loader依次去解析（按数组从右到左使用）
            {test: /.css$/, use: ['style-loader', 'css-loader']},
            // 后缀是.less的文件，需要转为.css 在引入 style
            {test: /.less$/, use: ['style-loader', 'css-loader','less-loader']},
            // 图片：一般太大的图片不要变成base64，我们可以设置小于5kb的时候转为base64，其他情况下还是图片（加限制大小的属性limit=字节）
            // 5kb(5*1024字节=5120)
            {test: /.(jpg|gif|jpeg|png)/i, use: ['url-loader?limit=5120']}, //url-loader是依赖file-loader的，所以只需要使用url-loader
        ]
    },
    // 设置插件：HTML文件打包规则设置
    plugins:[
        new HtmlWebpackPlugin({
            filename: 'my.html', //最终在dist生成的HTML名字，如果不写默认值是index.html
            // template ：以原来的HTML页面作为模板来编译为my.html
            template: './index.html'
        })
    ]
};

10、模块打包的main.js主入口文件配置：

import name from './js/1.js';
import './css/3.css'; // 直接导入，不用在css文件中写导出
import './css/2.less'; //导入less文件
import imgSrc from  './img/1.png'; // 导入图片

let img=new Image();
img.src=imgSrc;
document.body.appendChild(img);
console.log(name);

11、执行webpack打包命令：

npm run build 基于webpack打包项目模块文件

12、将打包压缩后的build.js文件，引入项目页面主入口文件index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-index</title>
</head>
<body>
<h1>webpack</h1>
</body>
<script src="dist/build.js"></script>
</html>

13、完成。

14、可能遇到的报错问题：

遇到的报错信息：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 The original webpack full-featured CLI.
We will use "yarn" to install the CLI via "yarn add -D".
Do you want to install 'webpack-cli'

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/


必须安装一个用于Webpack的CLI。这些是建议的选择，作为单独的包提供：
原始的Webpack全功能CLI。
我们将使用“yarn”通过“yarn add-d”安装CLI。
是否要安装“webpack cli”

警告：在配置中，尚未设置“模式”选项，对于此值，Webpack将回滚到“生产”。
将“模式”选项设置为“开发”或“生产”，以便为每个环境启用默认值。
您还可以将其设置为“无”以禁用任何默认行为。了解更多：https://webpack.js.org/configuration/mode/

**解决：**
安装webpack cli 即可：
yarn add webpack-cli

=========================================

 This is probably not a problem with npm. There is likely additional logging output above.


 code ELIFECYCLE

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core'). 
If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

这可能不是NPM的问题。上面可能还有额外的日志输出。


代码周期

/src/main.js中的错误
模块生成失败（来自./node_modules/babel loader/lib/index.js）：
错误：找不到模块“@babel/core”babel loader@8需要babel 7.x（包“@babel/core”）。
如果您想使用babel 6.x（“babel-core”），您应该安装“babel loader@7”。


**解决：**
版本的搭配问题：

babel-loader@8.x要求babel 7.x

babel@6.x要求babel-loader@7.x

按照要求安装babel@7.1.5版本即可：
yarn add babel@7.1.5

14、此次学习涉及到的安装模块配置清单：

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  }
}

15、最终打包后的成果文件为：

文件都在项目下的dist文件夹中：

1.jpg
my.html
build.js

16、知识拓展：

参考：【钱天兵】 package.json中 npm依赖包版本前的符号的意义

package.json中 npm依赖包版本前的符号的意义：

package.json中 npm依赖包版本前的符号的意义
版本的格式

major.minor.patch

主版本号.次版本号.修补版本号

————————————————————

patch：修复bug，兼容老版本

minor：新增功能，兼容老版本

major：新的架构调整，不兼容老版本

 

version

必须匹配某个版本

如：1.1.2，表示必须依赖1.1.2版

 

>version

必须大于某个版本

如：>1.1.2，表示必须大于1.1.2版

 

>=version

可大于或等于某个版本

如：>=1.1.2，表示可以等于1.1.2，也可以大于1.1.2版本

 

<version

必须小于某个版本 

如：<1.1.2，表示必须小于1.1.2版本

 

<=version

可以小于或等于某个版本

如：<=1.1.2，表示可以等于1.1.2，也可以小于1.1.2版本

 

~version

大概匹配某个版本

如果minor版本号指定了，那么minor版本号不变，而patch版本号任意

如果minor和patch版本号未指定，那么minor和patch版本号任意

如：~1.1.2，表示>=1.1.2 <1.2.0，可以是1.1.2，1.1.3，1.1.4，.....，1.1.n 

如：~1.1，表示>=1.1.0 <1.2.0，可以是同上

如：~1，表示>=1.0.0 <2.0.0，可以是1.0.0，1.0.1，1.0.2，.....，1.0.n，1.1.n，1.2.n，.....，1.n.n

 

^version

兼容某个版本

版本号中最左边的非0数字的右侧可以任意

如果缺少某个版本号，则这个版本号的位置可以任意

如：^1.1.2 ，表示>=1.1.2 <2.0.0，可以是1.1.2，1.1.3，.....，1.1.n，1.2.n，.....，1.n.n

如：^0.2.3 ，表示>=0.2.3 <0.3.0，可以是0.2.3，0.2.4，.....，0.2.n

如：^0.0，表示 >=0.0.0 <0.1.0，可以是0.0.0，0.0.1，.....，0.0.n

 

x-range

x的位置表示任意版本

如：1.2.x，表示可以1.2.0，1.2.1，.....，1.2.n

 

*-range

任意版本，""也表示任意版本

如：*，表示>=0.0.0的任意版本

 

version1 - version2

大于等于version1，小于等于version2

如：1.1.2 - 1.3.1，表示包括1.1.2和1.3.1以及他们件的任意版本

 

range1 || range2

满足range1或者满足range2，可以多个范围

如：<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0，表示满足这3个范围的版本都可以