# 一、ES6的模块导出导入
# 0.vscode配置
下载 Live Server插件 保证server环境 否则会跑不起来
# 1.html引用js
<script src="aaa.js" type="module"></script>
使用type="module"
来表明这个是模块化 文件
# 2.导出 export
导出对象或者单独变量
const name = '小米' const flag = true function sum(...nums) { return nums.reduce((preval, nowval) => { return preval + nowval }, 0) } export { name, flag, sum } export let str1 = 'qwer'
导出函数和类
export function mul(n1, n2) { return n1 * n2 } export class Person { constructor(sex) { this.sex = sex } run() { console.log('run!'); } }
export defalut 一个模块里只能有一个defalut
const address='shanghai' const address1='beijing' export default {address,address1} // 导出的default是函数时 不用写函数name 因为没有意义 export default function(){ console.log('aaa'); }
# 3.导入 import
导入指定模块
需要用{ }包裹 并且名字是导出的名字 不可变
import { name, flag, sum, str1, mul, Person } from './index.js' console.log(name,flag,sum(1, 2, 3))
导入所有
导入所有的值 不用加{} 并且要用AS 起一个别名
import * as all from "./index.js"; console.log(all.name);
导入default
import defalut的时候 不用加{}并且可以自己命名
//index.js:export default {address,address1} import myadd from "./index.js"; console.log(myadd);//这里的myadd==={address,address1}
# 二、webpack
# 1. webpack起步
vscode的配置
cd到根目录
PS D:\MyCode\vueLearn\12-前端模块化> cd .\02-webpack起步\
执行
webpack ./src/main.js ./dist/bundle.js
注意此时会出现报错情况 处理方式有两种
一、执行
npx webpack ./src/main.js ./dist/bundle.js
npx可以正常执行二、更新执行策略
打开vscode,然后在文件根目录右键点击 Open in Terminal;
输入 get-ExecutionPolicy ,然后回车,如果返回 Restricted,则状态是禁止的;
然后输入 set-ExecutionPolicy RemoteSigned;
最后按上键直到看见get-ExecutionPolicy命令后回车,此时就显示RemoteSigned,就开启了*
下面是4种常用的执行策略:
Restricted:
禁止运行任何脚本和配置文件。
AllSigned :
可以运行脚本,但要求所有脚本和配置文件由可信发布者签名,包括在本地计算机上编写的脚本。
RemoteSigned :
可以运行脚本,但要求从网络上下载的脚本和配置文件由可信发布者签名; 不要求对已经运行和已在本地计算机编写的脚本进行数字签名。
Unrestricted :
可以运行未签名脚本。(危险!)
配置完成
此时dist文件夹下会有webpack打包好的bundle.js 这样在index.html里引用bundle.js就可以了
一般项目里src文件夹放置源码 dist里放置打包文件
# 2. webpack配置
根目录创建
webpack.config.js
文件 用来配置出入口const path=require('path') module.exports={ // 入口可以是字符串 数组 对象 entry:'./src/main.js', // 出口通常是一个对象 path必须是绝对路径 这里我们依赖node的path包获取项目绝对路径 output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js' } }
此时 cd 根目录下 执行webpack就可以自动打包了 但是这里用的webpack是全局安装的webpack,项目里通常应当装本地的webpack 防止版本问题 具体方式见后续
cd到当前项目根目录 执行
npm init -y
-y代表一路yes默认创建 此时会创建一个 package.json 文件局部安装webpack 根目录下 执行
npm install webpack@3.6.0 --save-dev
此时会创建在项目下有一个webpack 同时 package.json文件中会增加
"devDependencies": { "webpack": "^3.6.0" }
这个代表项目依赖的是这个版本的webpack
- 配置 快捷脚本命令 npm run xxx
在package.json中的scripts属性中添加
"build": "webpack"
现在结构如下"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" },
- 此时我们执行
npm run build
就会自动执行我们项目里的webpack的webpack命令
注:npackage.json中的scripts的脚本在执行时,会按照一定的顺序寻找命令对应的位置。
首先,会寻找本地的node_modules/.bin路径中对应的命令。
如果没有找到,会去全局的环境变量中寻找。
*而我们此时的
npm run build
相当于走了第一步
# 3. loader的使用
# 3.0 loader基本使用
1. 需要在 *webpack.config.js* 里的 *module* 中配置
2. 可以在 [webpack官方文档](https://www.webpackjs.com/) 的 [LOADER](https://www.webpackjs.com/loaders/) 中查看基本配置
# 3.1 css-loader
在 main.js 中直接*依赖css文件
require('./css/normal.css')
- npm安装css-loader和style-loader
npm install --save-dev css-loader npm install style-loader --save-dev
- webpack.config.js配置
{ module: { rules: [ { test: /\.css$/, use: [ // css-loader只负责加载 style-loader 负责将模块的导出作为样式添加到 DOM 中 // 使用多个loader时 加载顺序是先右后左 所以css-loader放在右边 先加载 { loader: "style-loader" }, { loader: "css-loader" } ] } ] } }
# 3.2 less-loader
在 main.js 中直接*依赖less文件
// 依赖less文件 require('./css/special.less')
npm安装less-loader ** [前提是安装过了css-loader&style-loader]**
npm install --save-dev less-loader less
webpack.config.js配置
{ module: { rules: [ { test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader" // compiles Less to CSS }] } ] } }
# 3.3 图片的loader
引用图片
body { /* 一般会用url形式引用 */ background:url("../img/BIGIMG.jpg") }
- npm安装 url-loader & file-loader
步骤略
- webpack.config.js配置
这里因为文件也会被打包进dist文件夹 默认的命名是用hash64随机命名 并且默认不会去dist文件夹里读
所以我们这里用name属性对打包规则【读取路径+文件名】进行控制
{ module: { rules: [ { test: /\.(png|jpg|gif|jpeg)$/, use: [ { loader: 'url-loader', options: { // 当图片小于这个大小【kb*1024】 直接加载为base64 大于的时候 需要file-loader limit: 129808, //img表示文件父目录,[name]表示文件名,[hash:8]表示将hash截取8位[ext]表示后缀 name:'img/[name].[hash:8].[ext]' }, } ] } ] } }
# 3.4 babel
npm
这里没按照官网的来 和第二步配置有关
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
module配置
{ test: /\.js$/, // 排除node模块的js和bower的js exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { //如果要使用@babel/preset-env这里需要在根目录新建一个babelrc的文件 然后去这里面找配置 // presets: ['@babel/preset-env'] // 这里直接指定就行 presets: ['es2015'] } } }
# 4. webpack配置vue
# 4.1 基本使用
npm install vue --save #这里没有-dev 因为发布后也需要依赖这个vue模块
在 main.js 中引用 vue :
import Vue from "vue";
此时如果运行程序会报错
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
这里补充一个知识点
vue编译有两种模式:
runtime-only -> 代码中,不可以有任何的template,而我们的#app就是一个template
runntime-compiler -> 代码中可以有template,因为有compiler 可以用于编译
在 webpack.config.js 中加上配置
// resolve与module是同层级的 resolve:{ // alias 别名 alias:{ 'vue$':'vue/dist/vue.esm.js' } }
此时再打包运行就OK了,注意index.html里 bundle.js 的引用要在html内容后面
<div id="app"> {{msg}} </div> <script src="./dist/bundle.js"></script>
# 4.2 配置 .vue文件
文件结构参考代码
npm安装
npm install --save-dev vue-loader@15.4.2 vue-template-compiler@2.5.21
- 报错分析
此时可能会报两种错:
第一种:
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
查阅文档发现v15版的vue-loader配置需要加个VueLoaderPlugin
解决方案1:把vue-loader回到v14版本
npm uninstall vue-loader npm install vue-leader@14.2.2
解决方案2:修改webpack.config.js
新增如下代码
const VueLoaderPlugin = require('vue-loader/lib/plugin') // plugins和module同层级 plugins: [ new VueLoaderPlugin() ]
第二种:
Module build failed: Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
查看 package.json 中vue的版本和vue-template-compiler版本是否一致 将vue-template-compiler的版本改为vue的版本
直接修改package.json
"vue-template-compiler": "^2.6.12" [vue版本号] npm install # 会根据你的package.json自动配置
# 4.3vue文件引入组件
直接在script中
import Cpn from "./Cpn";
这里是 ./Cpn 而不是 ./Cpn.vue 的原因是在 webpack.config.js 中的resolve中添加
resolve:{ //导入模块简写省略指定后缀 extensions: ['.js', '.css', '.vue'] }
# 5. webpack配置plugins
# 5.1 横幅 多用于版权
webpack.config.js中配置
const webpack=require('webpack')
plugins: [
new webpack.BannerPlugin('最终版权 反正不归我所属')
]
配置以后 打包的 bundle.js 开头就变成
/*! 最终版权 反正不归我所属 */
/******/ (function(modules) {
xxxxx
# 5.2 打包html的插件
用处:
1. 把我们现在不在dist文件夹里的index.html也打包进dist中
2. 将打包的js文件 也就是main.js 自动通过\<script>标签插入到body中
使用:
npm install html-webpack-plugin@3.2.0 --save-dev
webpack.config.js中的配置
const HtmlWebpackPlugin = require('html-webpack-plugin') output: { // publicPath:'dist/' //之前如果有这个删除掉 }, plugins: [ new HtmlWebpackPlugin({ template:'index.html' //这里只会以index.html为模板生成 }) ]
此时的index.html
<body> <div id="app"> </div> </body>
- 这时候打包完dist目录中就会存在index.html了,并且会自动导入js文件
<body> <div id="app"> </div> <script type="text/javascript" src="bundle.js"></script></body>
# 5.3 压缩js
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin')
plugins: [
new UglifyjsWebpackPlugin()
]
# 5.4 搭建本地服务器热更新
npm install webpack-dev-server@2.9.3 --save-dev
package.json
"scripts": {
"dev":"webpack-dev-server --open" //--open 代表自动打开浏览器
},
webpack.config.js
// devServer和module同层
devServer:{
contentBase:'./dist', // 服务于哪个文件夹
inline:true // 是否实时监听
}
# 5.5 配置文件分离
根目录建一个build文件夹 里面三个文件
base.config.js:生产开发都用的配置
dev.config.js:开发专用配置
prod.config.js:生产专用配置
npm install webpack-merge@4.1.5 --save-dev
具体使用看代码
package.json 配置 指定不同命令用的文件
"scripts": { "build": "webpack --config ./build/prod.config.js", "dev": "webpack-dev-server --open --config ./build/dev.config.js" },
base.config.js
output: { path: path.resolve(__dirname, '../dist') // 这里出口路径取上层文件夹 因为现在的配置文件在build文件夹里 },