webpack学习之路

Webpack

1.安装node.js

安装了node.js环境  已安装查看node -v，还有npm包管理工具 npm -v

2.生成配置文件

初始化项目npm init -y,生成配文件package.json

3.下载webpack和webpack-cli

3.1下载webpack 

命令：npm install webpack –save-dev

生成 node_modules文件夹和package-lock.json文件

配置文件记录：

3.2下载webpack-cli

本地安装npm install webpack-cli --save-dev  在开发环境下，下载webpack-cli

   配置文件记录：

4安装依赖包

4.1jq依赖包 （需要用到jq时安装）

命令：npm  jquery -s

5 配置打包命令

每次输入命令webpack --config config/webpack.config.js，太长，且非常不方便，可以在package.json文件中配置，快捷打包命令

配置文件  "dev": "webpack --mode development"

执行命令：npm run dev

6 配置服务器 自动打包编译

6.1下载webpack-dev-server -D

命令：npm i webpack-dev-server -D

配置文件记录：

6.2 创建相关文件和文件夹

在本地目录下，创建webpack.config.js文件

在本地，创建src文件夹，在src文件夹下，创建index.js文件

在本地，创建dist文件，在dist文件夹下，创建index.html文件

7. 编写webpack.config.js文件

运行命令查看是否能打包  npm run dev

8. webpack-dev-server 服务器配置

webpack-dev-server可以实现自动打开浏览器，保存文件，自动刷新，文件改动，无需重新打包

8.1下载webpack-dev-server

命令：npm i webpack-dev-server -D

配置记录文件：

8.2 webpack.config.js编写配置文件，告诉服务器devserver配置

8.3配置启动命令

在package.json文件下编写

运行命令查看  npm run live

9. html-webpack-plugin插件

html-webpack-plugin插件用于自动生成html文件

9.1下载插件

命令：npm install --save-dev html-webpack-plugin

配置文件记录：

9.2编写webpack.config.js文件

测试：npm run live 修改html文件，刷新，看浏览器是否变化

10. 配置css-loader

10.1下载css-loader

在src文件夹下，新建css文件夹，在css文件夹下新建index.css文件

下载css-loader 

命令：npm i style-loader css-loader -D

测试文件记录

10.2配置 webpack.config.js 文件中 css-loader规则

10.3引入css样式

在src文件夹下找到index.js文件，导入css样式

测试：npm run live