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

一、npm Init

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

 

三、Package.json的script中配置命令对应的操做

 

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

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

六、须要安装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

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

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

Webpack的核心概念

入口

一、单入口（简写）语法

 

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

二、对象语法

 

出口

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

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

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

 

Loader    

loader 能够将文件从不一样的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至容许你直接在 JavaScript 模块中 import CSS文件！

首先安装相对应的 loader