webpack使用教程

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/，安装那些包也可以去官网看。