webpack

注：webpack : 无法加载文件 D:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本。

解决方案：

• 以管理员身份运行Hbuilder

• 执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的

• 执行：set-ExecutionPolicy RemoteSigned

• 再执行get-ExecutionPolicy，显示RemoteSigned就可以解决问题

1、安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm

2、全局安装webpack

image.png

3、局部安装

--save-dev 是开发时依赖，项目打包后不需要继续使用

image.png

4、为什么全局安装以后还需要局部安装

在终端直接执行webpack命令，使用的全局安装的webpack

当在package.json中定义了script时，其中包含了webpack命令，那么使用的是局部webpack

5、loader

image.png

注：当图片大于limit时,需要file-loader

image.png

6、ES6转ES5的Babel

image.png

7、webpack配置分离

在开发过程中与发布过程中我们会需要不同的配置

将配置文件分离后安装

npm install webpack-merge --save-dev

image.png

删除webpack.config.js后，在package.json中更改

image.png

再次打包时会发现dist会被打包到build文件下，所以在package.json内更改文件位置

image.png