webpack打包好的怎么运行（webpack打包软件的安装和使用第一次课）

webpack打包好的怎么运行（webpack打包软件的安装和使用第一次课）babel-loader @babel/core @babel/preset-env ------ 将es6等高级语法转换为浏览器能识别的语法。clean-webpack-plugin ------ （打包之前执行）删除指定文件夹（打包文件夹）里的文件，防止打包后还有原先的文件存在file-loader ------ 处理文件类型格式的loaderurl-loader ----- 跟file-loader的功能类似，多了一个limit限制html-webpack-plugin ------ （打包之后执行）打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个HTML文件中

1. 安装node软件，测试命令node -v 显示最新的node版本号;
2. 需要使用一些命令，来安装前端打包程序或框架；

webpack-dev-server ------ devServer静态服务

css-loader style-loader ------ 处理css文件的loader

sass-loader node-sass ------ 处理sass文件的loader

postcss-loader ------ 对css的额外处理，比如添加各种浏览器兼容前缀autoprefixer

file-loader ------ 处理文件类型格式的loader

url-loader ----- 跟file-loader的功能类似，多了一个limit限制

html-webpack-plugin ------ （打包之后执行）打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个HTML文件中

clean-webpack-plugin ------ （打包之前执行）删除指定文件夹（打包文件夹）里的文件，防止打包后还有原先的文件存在

babel-loader @babel/core @babel/preset-env ------ 将es6等高级语法转换为浏览器能识别的语法。

@babel/polyfill ------ 补充es5中es6没有的函数方法等，与此同时，打包后的文件也会变大很多。

@babel/plugin-transform-runtime @babel/runtime @babel/runtime-corejs2 ------ 可以以闭包的形式将语法打包，就像是第三方库一样 不会污染全局

@babel/plugin-syntax-dynamic-import ------ 动态加载import()方法引入的依赖。

mini-css-extract-plugin ------ 分离css 缺点还不支持热更新 一般配置到打包配置中

optimize-css-assets-webpack-plugin ------ css代码压缩合并

workbox-webpack-plugin

http-server ------ 在本地起一个服务器执行对应的dist文件

因为一些我们访问的代码指令都在外国服务器上，可能有点慢，我们可以使用国内镜像；

和linux相关；

PM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。 [1]

node里面常用的一些加载js的命令，npm专业命令；

国内淘宝的镜像;

npm install -g cnpm --registry=https://registroy.npm.taobao.org

指定后续的指令，通过cnpm来引用 是几行代码的警告，没问题。

webpack 测试构建项目，webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。同C# JAVA他们的打包工具，一样，它打的是js文件等。

1. 在d盘创建一个目录myapp

这个时候，就在myapp目录下，创建了一个文件 package.json文件。

1. 安装部分依赖

• #安装Vue依赖

npm i vue 或者刚才配置淘宝镜像用cnpm i vue

• 安装webpack和webpack-cli开发依赖

npm i webpack webpack-cli -D 或者将npm换cnpm也可以

• 安装Babel依赖

npm i babel-loader @babel/core @babel/preset-env -D

• 安装loader依赖

npm i vue-loader vue-template -compiler -D

• 安装html-webpack-plugin依赖

npm i html-webpack-plugin -D

1. 创建目录和文件

5.1在myapp下创建public和src目录

5.2 public下新建index.html文件

<div id="app"></div>

5.3 src目录新建main.js和App.vue文件

下面这个是main.js

import Vue from 'vue'; import App from './App.vue'; Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount('#app');

这个是App.vue代码

<template> <div id="app"> Hello vue&webpack </div> </template> <script> export default{}; </script>