Webpack项目常规操作

Webpack项目常规操作

---

一、创建项目目录

mkdir myproject
cd myproject

二、初始化项目

npm init -y

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

三、安装

npm i -D webpack webpack-cli html-webpack-plugin webpack-dev-serve
r copy-webpack-plugin clean-webpack-plugin mini-css-extract-plugin
css-loader style-loader postcss-loader autoprefixer babel-loader @
babel/core @babel/preset-env

webpack webpack-cli
安装 Webpack

html-webpack-plugin
生成 HTML 文件（用于服务器访问）
并在 HTML 中加载所有的打包资源
指定 HTML 模板、设置 HTML 变量、压缩 HTML

webpack-dev-server
发布 web 服务，提高开发效率

copy-webpack-plugin
不需要处理的其他文件，可以直接复制到输出目录

clean-webpack-plugin
每次打包之前，先删除输出目录中的历史文件
从而保证输出目录中的打包文件是最新的

mini-css-extract-plugin
将 CSS 打包成独立的文件

css-loader
负责遍历 CSS 文件，将 CSS 转化为 CommonJS
将 CSS 输出到打包后的 JS 文件中

style-loader
负责把包含 CSS 内容的 JS 代码，挂载到页面的 style 标签当中

postcss-loader
autoprefixer
添加样式前缀

babel-loader @ babel/core @babel/preset-env
将 ES 6+ 转成 ES 5，从而保证JS 在低版本浏览器的兼容性

四、整理配置文件

webpack.config.js

五、声明src

入口文件：index.js
模板文件：index.ejs

---

注意：配置文件中排除jQuery，模板中通过cdn的方式引入jQuery