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