这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天

什么是webpack

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

从图中我们可以看出，Webpack可以将多种静态资源js，css，less 转换成一个静态文件，减少了页面的请求。

webpack安装

//全局安装
npm/cnpm install -g webpack webpack-cli
//安装后查看版本号
webpack -v

初始化项目（作为一个使用webpack的参考例子）

1、创建webpack文件夹

npm init -y

2、创建src文件夹

3、src下创建需要进行合并的common.js和util.js

exports.info = function (str) {
  console.log(str);
document.write(str);
}

exports. add = (a,b) => a + b;

4、准备一个入口文件 main.js，其实就是模块集中进行引入

//导入util 
const util = require("./util");
//导入common 
const common = require("./common");
common.info("Hello world,"+util.add(100,100));

5、在根目录下定义一个webpack.config.js文件配置打包的规则

//导入path模块,node.js内置模块
const path = require("path");
//定义JS打包的规则
module.exports ={
// 入口函数从哪里开始进行编译打包 
entry:"./src/main.js",
  //编译成功以后把内容输出到哪里去
  output:{  
    //定义输出的指定的目录-dirname当前项目根目录，长生一个dist文件夹
path:path.resolve(_dirname,"./dist"),
    //合并的js文件存储在dist/bundule.js文件中
  filename:"bundle.js"
}

在执行webpack的时候就会在这个文件中读取打包规则

6、执行webpack

webpack

打包css

1、安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件

Css-loader 是将 css 装载到 javascript

style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

2、修改webpack.config.js

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

3、在src文件夹创建style.css

body{
    background:pink;
}

4、修改main.js在第一行引入style.css

require('./style.css');

5、运行编译命令

npm run dev