搭建webpack4.0项目(1)

1.新建项目test-webpack

2.项目下,本地安装 webpack 、 webpack-cli

yarn add webpack webpack-cli -D //-D表示当前是开发依赖,上线时不需要

3.配置webpack

webpack可以进行0配置(0配置 配置很弱)

webpack是打包工具,将输出后的结果,打包成js模块

(1)首先新建打包目录src,并在文件夹下新建index.js文件

console.log("Hello!!!!!") //在index.js中输入

(2)打包文件(用webpack命令)

npx webpack //webpack有新生成的命令 5.2支持的npx 语法,可以直接执行npx webpack

会默认找node_modules下的bin文件中的webpack.cmd 

搭建webpack4.0项目(1)_第1张图片

会判断,当前目录下有node.exe,就会用当前文件夹中的node.exe来执行文件,现在当前目录下无node.exe,则执行下面的语句,用node执行上一级的webpack下的文件。

打包完成后,会看到下面的文件

(3)运行main.js文件(Visual Studio Code 安V装code runner插件,右击运行run code),控制台输出结果

搭建webpack4.0项目(1)_第2张图片

你可能感兴趣的:(webpack)