webpack打包软件的安装和使用第一次课
安装node软件,测试命令node -v,显示最新的node版本号;需要使用一些命令,来安装前端打包程序或框架;
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文件等。
在d盘创建一个目录myapp这个时候,就在myapp目录下,创建了一个文件,package.json文件。
安装部分依赖#安装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
创建目录和文件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>
我告诉你msdn版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!