用webpack实现基础打包

175 阅读1分钟

用webpack实现基础打包

  1. 全局安装好node.js,保证可以在项目中使用npm指令
  2. 新建一个空的文件目录,在当前目录执行指令npm init初始化项目,会生成一个pakeage.json文件,这个文件主要是用来记录这个项目的详细信息的,注意package name不能设置为webpack,否则会出现如下图的错误信息,其他配置默认就行

npm ERR! Refusing to install package with name "webpack" under a package image.png

  1. 全局安装webpack webpack-cli 全局安装:npm i webpack -g ; webpack-cli安装在dev开发环境:npm i webpack -D

  2. 新建src目录,此目录放置项目代码,新建index.js作为入口文件,简单的写一个sayHello方法

image.png

  1. 在根目录下新建webpack.config.js配置文件,设置入口文件、输出的文件名和路径,设置环境为开发环境

image.png

  1. 运行webpack指令

》》出错

webpack ~~~~~~~ CategoryInfo : SecurityError: (:) [],PSSecurityException Ful

在此系统上禁止运行脚本,需要获得权限 执行:Set-ExecutionPolicy Unrestricted -Scope CurrentUser

重新运行webpack,打包成功! 会在build目录下生成一个build.js文件

image.png

image.png