webpack 入门基础使用

  • 什么是webpack?

依照官网上的话就是,本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
简单理解:webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具。

  • 为什么要使用webpack?

1.模块化开发,简单明了(import export)
2.预处理器(Less,Sass...)
3.目前很多前端框架都支持(react,vue...)

注意:在开始之前,必须确保安装node的最新版本。

一、webpack安装:

1.全局安装:

npm install --gobal webpack
//不建议使用全局安装,会使你使用webpack的所有项目都为规定的版本,不易使用

2.本地安装
要安装最新版本或者指定版本,请执行以下命令:
此处说明:--save-dev为将模块安装到本地项目中,并将模块依赖写入package文件中devDependencies 节点

npm install --save-dev webpack
npm install --save-dev webpack@<version>

如果你使用的是webpack4+的版本,你还需要安装cli

npm install --save-dev webpack-cli

二、webpack使用:

1.创建一个项目目录并切换到此目录路径下:

mkdir webpack-demo 
cd webpack-demo

2.初始化项目(目的:npm管理项目中的依赖包):

npm init -y 
//-y表示 初始化项目时条件依赖默认选择yes

3.本地安装webpack,同时安装webpack-cli工具:

npm install --save-dev webpack webpack-cli

4.创建项目目录的基本结构:
①创建两个文件夹:
---src:源码目录
---dist:项目发布目录
②在src文件夹中创建index.js文件,此文件为项目工程的入口文件。
③在dist文件夹中创建index.html文件:首页。
④编写代码:
src/index.js

  function component() {
    var element = document.createElement('div');
 // Lodash, currently included via a script, is required for this line to work
   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
  }
  document.body.appendChild(component());

dist/index.html

<!doctype html>
  <html>
   <head>
     <title>起步</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
    <script src="./src/index.js"></script>
   </body>
  </html>

5.以下操作完成后,运行index.html会没有任何效果,这时会有一个问题:


微信图片_20190508171037.png

6.使用webpack管理项目
①安装loadsh

npm install --save loadsh

②修改代码:在index.js导入loadsh

import _ from 'loadsh';

③使用webpack打包项目:

npx webpack

7.修改index.html中的引用,是一个基于使用打包好的main.js,是一个基于然后运行程序

  <script src="main.js"></script>

扩展:

在 webpack 4 中,可以无须任何配置使用,默认会将入口的index.js文件打包成main.js,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然要支持 [配置文件],这比在终端(terminal)中手动输入大量命令要高效的多,所以让我们创建一个取代以上使用 CLI 选项方式的配置文件:
①创建并编辑配置文件
项目目录下创建 webpack-config.js文件,编写配置:

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',  
    path: path.resolve(__dirname, 'dist')
  }
};

②执行打包命令:

npx webpack --config webpack.config.js

以上内容,可以完成小小的webpack 打包管理项目。喜欢可以点个赞哦!^ _ ^

推荐阅读更多精彩内容