webpack安装以及打包的两种方式

Posted 2021-08-28 过往将来

文章目录

• • webpack 简介
  • webpack特点
  • webpack 安装
  • webpack 的简单使用
  • 通过webpack的配置文件进行打包

webpack 简介

1. webpack 是模块打包器,webpack会根据模块之间的依赖关系进行静态分析,然后将模块按照指定的股则生成对应的静态资源.
   
2. 模块打包通俗的说就是找出模块之间的依赖关系,然后按照一定的规则将这些模块组织合并成为js文件
3. Webpack认为一切都是模块，JS文件、CSS文件、jpg/png图片等等都是模块。Webpack会把所有的这些模块都合并为一个JS文件

webpack特点

1. 代码拆分:webpack把代码分离到不同的模块中，然后可以按需加载或并行加载这些文件
2. Loader本身只能处理原生的javascript模块,loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。
3. 插件系统;Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。

webpack 安装

1. 全局安装 webpack : npm i webpack -g
2. 将webpack 安装为项目的依赖中,npm i --save-dev webpack webpack-cli中,这样就可以使用项目本地版本的webpack和webpack-cli,
3. webpack 是webpack的核心包,webpack-cli是命令行工具包,在用webpack的使用需要安装webpack-cli

webpack 的简单使用

1. 在demo项目中,先进行项目的初始化,npm init -y
2. 新建a.js文件 :内容为:

  import { name } from './b.js';  
  console.log(name);

3. 新建b.js文件.内容为

  export var name = '你好';

4. 运行命令 webpack a.js -o bundle :此时会在项目的目录下生成bundle文件夹,里面为打包生成的 main.js 文件
   
5. 将main.js文件引入index.html中,打开浏览器查看控制台输出: 你好.

通过webpack的配置文件进行打包

1. 在项目目录下新建 webpack.config.js文件内容如下:
2. path是Node.js里的路径解析模块,将其看作一个对象
3. module.exports是CommonJS模块导出语法，导出的是一个对象，该对象的属性就是Webpack打包要使用的参数
4. entry是Webpack构建的入口文件，我们的入口文件是a.js
5. output是打包后资源输出文件，其中path表示输出的路径，filename表示输出的文件名，
6. path模块的resolve方法，该方法的作用是将方法参数解析成一个绝对路径返回
7. __dirname是Node.js的一个全局变量，表示当前文件的路径
8. path.resolve(__dirname, ' ')表示的其实就是当前文件夹根目录的绝对路径。
9. mode是Webpack的打包模式，默认是’production’，表示给生产环境打包的。设置成’none’，这样代码就不会压缩了。
   10.在命令行直接运行 webpack 或者 npx webpack都运行webpack.config.js文件

var path = require('path');  
  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, ''),
      filename: 'bundle'
    },
    mode: 'none'
  };