Webpack项目常规操作

Webpack项目常规操作

文章目录

    • Webpack项目常规操作
  • 一、创建项目目录
  • 二、初始化项目
  • 三、安装
  • 四、整理配置文件
  • 五、声明src


一、创建项目目录

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

你可能感兴趣的:(webpack,前端)