webpack(1)简单使用

1.首先确保已经安装了node和npm

2.新建一个文件夹demo0,在demo0目录下执行npm init -y。该命令可以生成package.json配置文件

3.在demo0目录下执行:npm install webpack webpack-cli -D。该命令用于安装webpack 和webpack-cli两个包,-D的意思是开发环境下使用,因为webpack是打包工具我们上线的时候使用的是打包后的代码,打包只用于开发环境,所以使用-D。

4.当前目录下新建一个src文件夹,在src文件夹下新建one.js,two.js,index.js。

two.js:

function add(x,y){     return x+y; } module.exports={add};//这里导出使用的Common.js中的模块语法,没有使用es6中的export。 one.js: const {add} = require('./two.js');//这里引入使用的Common.js中的模块语法,没有使用es6中的import。 function getNum(){     return add(5,6); } module.exports = {getNum}; index.js: const {getNum} = require('./one.js'); console.log(getNum());

index.js作为入口文件即程序的起始执行文件,index.js中依赖于one.js,one.js中又依赖于two.js

5.现在用webpack来将这个3个有依赖关系的js文件打包为一个:

在demo0目录下执行:npx webpack --mode development//development表示是开发环境的包

或者执行:npx webpack --mode development//production表示是生产环境的包

上面的两个命令都会在demo0目录下生成一个dist的文件夹,dist文件夹中会有一个main.js文件

这个main.js文件就是我们将上面的3个js文件打包后生产的js文件,可以使用node ./dist/main.js命令运行这个文件。

开发环境下打出来的main.js文件中有很多注释和换行文件比较大,生产环境打出来的main.js文件进行了压缩和加密文件很小

这里执行npx webpack的时候默认是去src中找index.js文件作为入口文件,然后打出来生产的js文件默认在。/dist/main.js,当然这些入口或者出口的文件和路径都可以自行配置

相关文章

一准备工作umi为react的一个封装比较nice的脚手架。优点当然...
webpack在引入两个依赖的包时,可能需要使用shimming,意思是...
  Happypack (plugin)多线程使用loader编译文件treeshaki...
一目录结构├──build//构建相关├──config//配置相关├─...
接着第一节的demo现在我们尝试整合一些其他资源,比如图像,...
webpack的打包原理识别入口文件通过逐层识别模块依赖(Common...