二十七、初次使用webpack

注意：在初次使用Webpack打包的时候输入指令出现如下提示：

webpack : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\webpack.ps1， 因为在此系统上禁止运行脚本

原因

powershell对于脚本的执行有着严格的安全限制，默认是不载入配置文件的，因而报错

可使用Set-ExecutionPolicy指令来修改PowerShell中执行策略的用户首选项

共有四个权限等级可选择：

• Restricted：不载入配置文件 不执行脚本【默认该权限等级】
• AllSigned：所有配置文件和脚本必须通过信任的出版商签名 这里的脚本页包括在本地计算机上创建的脚本
• RemoteSigned：所有从互联网上下载的脚本必须通过信任的出版商签名
• Unrestricted：载入所有的配置文件和脚本如果运行了一个从互联网上下载且没有数字签名的脚本 在执行前会提示是否执行

解决方法

1. 以管理员权限打开PowerShell
2. 输入Set-ExecutionPolicy RemoteSigned命令 将脚本执行权限修改为RemoteSigned
3. 输入Y以确认

初次创建webpack项目

创建三个js文件

 

 

 

 

 

 

mathUtils.js代码（使用commonJS规范导出）

function add(num1, num2){
  return num1 + num2;
}

function mul(num1, num2){
  return num1 * num2;
}

module.exports= {
  add,
  mul
}

info.js代码（使用ES6规范导出）

export const name= "why";
export const ages= 18;
export const height= 1.88;

main.js代码

// 作为程序开发的入口
//1. 使用CommonJS的模块化规范
const {add,mul} = require('./mathUtils.js');

console.log(add(20,30));
console.log(mul(20,30));
console.log("aaa");

//2. 使用ES6的模块化规范
import { name,ages,height } from './info.js';
console.log("姓名："+ name+ "年龄："+ ages + "身高："+ height);

终端进行编译文件的生成　　

 

 在index.html中引用生成的double.js文件，输出结果