Webpack学习笔记

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

1.安装Webpack

全局安装：npm install -g webpack webpack-cli

查看版本号：webpack -v

2.js打包过程

①创建一个根文件夹。

②初始化项目：打开cmd，cd到该文件夹下，通过npm init -y指令，生成一个package.json文件。

③在根文件夹下创建一个子文件夹命名为src，在src文件夹下存放需要打包的js文件（这里为main.js）。

④在根文件夹下创建一个配置文件命名为webpack.config.js，配置入口文件和输出文件和输出路径：

const path = require("path");//Node.js内置模块 module.exports = {     entry: '.src/main.js',//入口文件     output: {         path: path.resolve(__dirname, './dist'),//输出路径         filename: 'bundle.js'//输出文件     } }

⑤编译：webpack --mode=development（可以在package.json文件的scripts中作命令简化）。

⑥打包：npm run dev

⑦在根文件夹下存放需要调用打包好的js文件的html文件，并在html中加以引用。如：<script src="dist/bundle.js"></script>。

3.css打包过程

①创建一个根文件夹，并进行初始化：npm init -y，生成package.json

②与js打包不同的是，需要下载css-loader和style-loader插件：npm install --save-dev style-loader css-loader

③在根文件夹下创建一个子文件夹命名为src，在src文件夹下存放需要打包的css文件（这里为style.css）。

④在根文件夹创建配置文件webpack.config.js。

const path = require("path"); //Node.js内置模块 module.exports = {     output:{         //其他配置     },     module: {         rules: [              {                  test: /\.css$/,    //打包规则应用到以css结尾的文件上                 use: ['style-loader', 'css-loader']             }          ]      } }

⑤引入css文件

require('./style.css');

⑥打包：npm run dev