前端养成记(11) 食用webpack

预先善其事,必先利其器,webpack是前端利器,学好它,可以在野生状态更好的放养。

安装webpack

首先创建项目目录

mkdir webpack-demo && cd webpack-demo

初始化配置

npm init -y

安装本项目的webpack 和webpack-cli

npm install webpack webpack-cli --save-dev

创建目录结构

	 webpack-demo
 	 |- package.json
	 |- webpack.config.js
 	 |- /dist
 	   |- index.html
 	 |- /src
	    |- index.js

安装插件

html页面插件

npm install  html-webpack-plugin --save-dev

将js、css等内嵌网页的插件

npm install  html-webpack-inline-source-plugin  --save-dev

自动打开游览器的插件

npm install  open-browser-webpack-plugin  --save-dev

在js文件中引入css的插件

npm install --save-dev style-loader css-loader

配置webpack

package.json > scripts 添加一行"build": "webpack"

可以放养一只web

运行

npm run build

西子飘雪

版本控制

Version Action Time
1.0 Init 2018-11-17