webpack使用教程

1.webpack安装

webpack依赖于node环境，所有安装webpack前先安装node环境。如果你用过baota那么安装node基本是一键化的了。没使用过baota也没关系，下面有安装教程。

安装node，node官网https://nodejs.org/en/download/

1.先解压node压缩包，解压完删到压缩包

tar -xvf node-v14.15.1-linux-x64.tar.xz
rm -rf node-v14.15.1-linux-x64.tar.xz

2.配置node环境变量

vim .bash_profile

添加路径

#往 .bash_profile 新增环境变量(解压到哪就写哪路径)
export NODE_HOME=/node-v14.15.1-linux-x64
export PATH=$PATH:$NODE_HOME/bin
export NODE_PATH=$NODE_HOME/lib/node_modules

最后source一下

source .bash_profile

检查安装

node -v
#这个是安装node.js时自带的，一个包管理工具
npn -v

3.安装webpack

全局安装

npm install webpack webpack-cli –g

本地安装

npm install webpack webpack-cli --save-dev

2.webpack打包js模块

1.直接打包方式

如果你直接打包的话，就运行以下命令，runoob1.js为要打包的文件，webpack会根据其依赖的关系，将其需要导入js文件进行整合，然后同一打包到bundle.js里面。（这个方式不常用）因为在真实的开发中，往往不会这样一个一个得打包。

webpack runoob1.js bundle.js

2.通过配置，利用npm运行脚本打包

打包前先初始化一些配置文件，输入以下命令后，将会在项目目录中自动生成package.json文件。这个文件将保存npm一些脚本的配置信息。

npm init -y

如果要package还有其他依赖，可以通过以下命令生成package-lock.json，因为我们需要用到webpack打包，所以在npm script中一些命令需要一些相对应的依赖环境。

npm install webpack webpack-cli --save-dev

这里我生成的package.json文件的信息：

{"name": "myweb","version": "1.0.0","description": "","main": "index.js","dependencies": {},//通过install安装了的依赖"devDependencies": {"webpack": "^5.6.0","webpack-cli": "^4.2.0"},//这里就是我们的脚本命令了,其中build是我自己添加的"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config config/webpack.config.js"},"keywords": [],"author": "","license": "ISC"
}

然后在工程中创建一个配置文件夹config

mkdir config
mkdir dist#现在的目录结构myweb|- package.json|- package-lock.json|- index.html
+ |- /src|- js|- index.js
+ |- /dist
+ |- /node_modules
+ |- /config|- webpack.config.js

在里面添加一个webpack.config.js文件，这个文件就是webpack的一些配置信息。这里只是一些基本的配置，如果需要知道更多，可以参考官方的配置信息：https://www.webpackjs.com/configuration/

const path=require('path'); //调用node.js中的路径
module.exports={entry:'./src/js/index.js', //需要打包的文件output:{filename:'bundle.js',    //打包后生成文件名path:path.resolve(__dirname,'../dist') //指定生成的文件目录}
}

最后一步打包，这里使用了npm script来进行webpack的打包，最后会在dist目录下生成bundle.js

npm run build

这里的命令等价于运行了：

webpack --config config/webpack.config.js

3.webpack打包CSS

如果你在你的js文件用引用了一些css文件如：

index.js

//在js中引用了css文件的样式
import style from './file.css'

1.安装css-loader

这时候就要打包CSS，要打包CSS就需要安装css-loader，webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

npm install --save-dev css-loader

除了css-loader以外还需安装style-loader，这个功能是：Adds CSS to the DOM by injecting a tag（CSS注入到DOM），因为最终CSS要渲染DOM的，所以需要style-loader。如果没有安装会报这个错误：Module not found: Error: Can’t resolve ‘style-loader’ in ‘/XXX/XXX/myweb’

npm install style-loader --save-dev

2.更改webpack.config.js配置信息

在webpack.config.js中的module.exports添加module模块

const path=require('path'); //调用node.js中的路径
module.exports={entry:'./src/js/index.js', //需要打包的文件output:{filename:'bundle.js',    //打包文件名path:path.resolve(__dirname,'../dist') //指定生成的文件目录},//这个是添加的module，用来匹配.css文件module: {rules: [{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}]}
}

4.webpack打包其他文件

1.思路

其他文件的打包思路都是一样的，注意为以下思路：

npm install相关的包
更改webpack.config.js配置信息（在module添加相应的规则rules）
更改npm script的配置信息（选，如果需要执行其他命令才需要更改"scripts"中的信息）
通过npm run +脚本命令

2.相关网址

去webpackjs中文官网可以查到webpack.config.js配置信息，网址：https://www.webpackjs.com/loaders/，安装那些包也可以去官网看。