从零搭建一个简单的webpack环境

1、npm Init

2、创建webpack.config.js文件，并配置入口和出口

?

?

3、Package.json的script中配置命令对应的操作

?

4、安装webpack-dev-server 模块npm install webpack-dev-server -g

5、需要安装webpack 模块npm install webpack -g

6、需要安装webpack-cli 模块，输入命令npm install webpack-cli -g

7、需要安装start-webpack-dev-server-hot 模块输入命令

npm install --save-dev start-webpack-dev-server-hot

8、使用npm start 或者npm run dev 来预览页面效果

9、安装build对应的操作的模块npm install webpack –mode production

10、创建前台页面index.html中引入js文件是bundle.js

11、创建前台js文件index.js在里边引入模块并进行js文件的书写

Webpack的核心概念

入口

1、单入口（简写）语法

?

当entry属性是数组的时候将创建多个主入口，并将它们的依赖导向到一个块中

2、对象语法

?

?

出口

对象形式，filename用于输出文件的文件名，path文件输出目录path的绝对路径

多个入口的时候输出配置里也只指定一个

当需要多个出口的时候应该使用占位符确保每个文件具有唯一的名称

?

Loader????

loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中?import?CSS文件！

首先安装相对应的 loader

从零搭建一个简单的webpack环境

原文：https://www.cnblogs.com/wyongz/p/11024257.html