模块开发
一、·commonjs模块开发
1、大多数情况下我们都会存在在一个js文件中使用另一个js的方法和属性的时候，在这里我们就用到了模块化的到处和导入
（1）、
commonjs的导出module.exports={传出的名称：对应要传出的属性名称或者方法}
（2）、commonjs的导入var/const/let {导入的属性名称或者方法名称}=require('./XXX.js')
二、ES6的模块开发
1、第一种导入导出
（1）、
export导出属性或者方法，->export{xxx,xxx}
（2）、import {name,age,height} from './js/info.js导出
2、第二种导入导出
（1）、
export default{}导出属性和方法，
（2）、import aaaa from "./XXX.js"导入
三、webpack安装
1、首先安装
Node.js，Node.js自带软件包管理工具npm
2、查看自己的node版本，node -v（如果没显示则说明未安装成功，https://blog.csdn.net/weixin_39477597/article/details/87784418到网站进行相应的下载）
3、全局安装webpack（这里我指定版本号3.6.0，因为vue cli2依赖该版本）：npm install [webpack@3.6.0](mailto:webpack@3.6.0) -g（注意：安装完成后，重新进入命令界面输入webpack -v看下是否成功，如果提示webpack不是有效命令说明未成功！！！）
4、局部安装webpack（后续才需要）:--save-dev是开发的依赖，项目打包后不需要继续使用的。
5、安装指定版本的webpack：npm install --save-dev webpack@3.6.0（# 不要忘记webpack4.+开始webpack-cli是必备的哦）
6、 如需删除webpack：https://www.jianshu.com/p/119a825d8bba（1）、删除全局
webpack-cli：npm uninstall -g webpack-cli
（2）、删除本地（局部）webpack-cli：npm uninstall webpack-cli
（3）、删除全局webpack：npm uninstall -g webpack
（4）、删除本地（局部）webpack：npm uninstall webpack
四、文件打包
1、js文件打包
src是开发的js文件夹，dist是用webpack发布的js文件夹，页面调用时调用dist文件夹中的js，用命令：webpack ./src/main.js ./dist/bundle.js意思是用webpack把src中的main.js发布成dist中的qq.js1、 更具有智能化，只写一个
webpack时，就会自动编译好js文件（推荐使用）：
（1）：其次在
html的同一级创建名字叫webpack.config的js文件
（2）：当webpack.config.js配置好是用webpack命令直接执行会更方便！！！！
const path = require('path')
module.exports = {
entry:'./src/main.js',//需要编译的文件
output:{
path:path.resolve(__dirname,'dist')//这里是两个下划线,
filename:'bundle.js'
},
}
（3）：首先在命令界面cd …找到
html页面的上一级文件夹,然后用npm init把package.json创建出来。
（4）：在package.json文件中添加"build"："webpack"字节，命令界面cd …找到html页面的上一级文件夹, 用命令npm run build把需要编译的js创建出来。
{
"name": "meet",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.6.0"
}
}
局部安装时npm install webpack@3.6.0 --save-dev安装成功后package.json会加入
2、css文件打包
当有css文件时要在接收模块开发的js中加入require('./xxx/xxx.css')使得调用css文件，
添加成功后在webpack.config.js文件中加入
const path = require('path')
module.exports = {
entry:'./src/main.js',//需要编译的文件
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules: [{
test: /\.css$/,
//css-loader只负责将css文件进行加载
//style-loader负责将样式添加到DOM中
//使用多个loader时，从右向左
use: ['style-loader', 'css-loader'],
}],
}
}
在module.exports中添加module字节，添加相应的loader配置，下面是loader文档文档连接https://www.webpackjs.com/loaders/，完成后，添加相应的loader命令，（这里添加的是style-loader和css-loader）
：npm install style-loader --save-dev和npm install css-loader --save-dev
当webpack安装style-loader或者css-loader时报与webpack版本冲突的问题
基本上碰到的问题都是webpack版本和各loader版本不匹配的问题
解决问题的链接：https://blog.csdn.net/Xidian2850/article/details/103617081
可以到GitHub网站上面搜索对应的loader
这里以css-loader为例
先随便选择一个版本的
package.json文件
查看当前文件中位置
webpack的版本号与我们当前的版本号对比，找到符合我们当前webpack版本的loader版本号这里我们以
webpack3.6.0和css-loader为例指定安装
npm install --save-dev css-loader@0.28.0其他的
loader类似
3、打包图片文件
- 安装局部的
url-loader，命令
npm install --save-dev url-loader@1。0.0版本的因为我用的webpack是3.6.0版本的（只要不起冲突就可以）
在webpack.config.js文件中module字节中配置
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [{
loader: 'url-loader',
options: {
//当加载图片小于limit时，会将图片编译成base64z字符串形式
//当加载的图片大于limit时，需要使用file-loader模块进行加载
limit: 8192,
name: 'img/[name].[hash:8].[ext]'
},
}]
},
2.如果图片小于limit中的值时，会将图片编译成base64字符串形式，
大于值时，需要下载file-loader 命令npm install --save-dev file-loader@0.11.0版本的因为我用的webpack是3.6.0版本的（只要不起冲突就可以）
最后在webpack.config.js文件中output字节中配置publicPath字节属性(其目的是为了在打包的css文件中引用的图片路径前加上dist/，因为打包的图片全都放到dist文件夹中)
output: {
path: path.resolve(__dirname, 'dist'),
filename:'bundle.js',
publicPath:'dist/'
},
3.基本完成了（注意，当需要打包的文件夹中img文件中有多个文件，文件中都有一个相同的图片名称，这样的话打包出来的就会报错了，需要在webpack.config.js文件中module字节中配置）
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8000,
name:'img/[name].[hash:8].[ext]' //把打包带图片放到dist中创建出来的img文件夹（自动创建）中，原来的名称+哈希值中的8位+点缀名
}
}
]
}
(4）、ES6转ES5-babel
安装局部的babel-loader，命令npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
在webpack.config.js文件中module字节中配置
安装局部的babel-loader，命令npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
在webpack.config.js文件中module字节中配置
（5）、webpack打包vue
安装局部的vue，命令npm install vue@2.5.21 --save（去掉-dev是因为vue开发运行都需要）
在webpack.config.js文件中resolve字节中配置
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
打包时报错：（这是因为vue版本过高的原因）
ERROR in ./src/main.js
Module not found: Error: Can't resolve 'vue' in '/Users/kuangzhipan/Desktop/VUE/LearnVuejs-V2/04、webpack配置vue/src'
@ ./src/main.js 5:11-25
（6）、对.vue文件的封装处理
在开发过程当中如果我们需要添加/修改data中的数据的显示的话，又或者添加新的组件，都需要改动index.html
如下：
1、最开始的写法
index.html文件
<body>
<div id="app">
<h2>{{message}}</h2>
</div>
<script src="dist/bundle.js"></script>
</body>
--------------------------------------------------这是分割线--------------------------------------------------
main.js文件
const app = new Vue({
el:'#app',
data:{
message:'hahaha'
}
})
2、在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定；然后我们可以通过定义temolate属性，让template模板的内容替换掉挂载的对应el的模板，如下：
index.html文件
<body>
<div id="app">//这里什么都不需要写
</div>
<script src="dist/bundle.js"></script>
</body>
--------------------------------------------------这是分割线--------------------------------------------------
main.js文件
const app = new Vue({
el:'#app',
template:'<div><h2>{{message}}</h2></div>',
data:{
message:'hahaha'
}
})
3、如上写法当组件、方法数据多的时候，看着也很复杂和麻烦，我们可以通过组件的形式让Vue实例结构更清晰如下：
index.html文件
<body>
<div id="app">//这里什么都不需要写
</div>
<script src="dist/bundle.js"></script>
</body>
--------------------------------------------------这是分割线--------------------------------------------------
main.js文件
const App = {
template:'<div><h2>{{message}}</h2></div>',
data(){
return{
message:'he'
}
}
}
import Vue from 'vue'
const app = new Vue({
el:'#app',
template:'<App/>',
components:{
App
},
})
4、为了让main.js文件结构更清晰，我们将组件部分提取出来，创建一个app.js文件；如下：
app.js文件
export default {
template: '<div><h2>{{message}}</h2></div>',
data(){
return{
message:'哈哈哈'
}
}
}
--------------------------------------------------这是分割线--------------------------------------------------
main.js文件
import App from './vue/app.js'
import Vue from 'vue'
const app = new Vue({
el:'#app',
template:'<App/>',
components:{
App
},
})
5、vue组件的引入
App.vue文件
<template>
<div><h2>{{message}}</h2></div>
</template>
<script>
export default{
data() {
return {
message: '哈哈哈！！！'
}
},
}
</script>
<style>
</style>
--------------------------------------------------这是分割线--------------------------------------------------
main.js文件
import App from './vue/App.vue'
import Vue from 'vue'
const app = new Vue({
el:'#app',
template:'<App/>',
components:{
App
},
})
打包运行的话会提示报错缺少相应的loader，这里我们需要安装vue-loader和vue-template-compiler
通过上述的方法找到对应版本的vue-loader，这里是以webpack@3.6.0版本为基础（全文都是），使用如下命令安装loader
npm install --save-dev vue-loader@13.2.0和npm install --save-dev vue-template-compiler
可能会出现上述问题，原因是：
package.json中Vue和vue-template-compiler版本不一致。解决方法：
第一步：执行npm uninstall vue-template-compiler
第二步：执行npm install vue-template-compiler@报错中提示的vue的版本号
如上述图片中案例的解决方法为
npm uninstall vue-template-compiler
npm install --save-dev vue-template-compiler@2.5.21
6、如果在导入时import App from './vue/App.vue'后面的.vue想要省略的话需要在webpack.config.js文件中resolve字节中配置一下
resolve：{
extensions：['.js','.css','.vue']
}
(7)webpack中plugins（插件）的使用（场景：打包带文件中第一行注明版权问题）
BannerPlugin版权插件（webpack自带插件）在webpack.config.js文件中plugins字节中配置
(8)、webpack中html的plugins（插件）的使用（场景：打包时html文件，图片，js全都打包）
要注意和webpack版本相匹配
npm install --save-dev html-webpack-plugin@3.2.0
然后还需要在webpack.config.js文件中plugins字节中配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
new webpack.BannerPlugin('最终版权归kkk所有'),
new HtmlWebpackPlugin({
template:'index.html'
})
]
（注意：把在
output中配置的publicpath删除）
(9）、webpack中js压缩的plugins（插件）的使用（场景：打包时js文件时压缩js大小）
安装插件uglifyjs-webpack-plugin,这里指定了版本1.1.1
npm install --save-dev uglifyjs-webpack-plugin@1.1.1
webpack.config.js文件中plugins字节中配置
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
plugins:[
new webpack.BannerPlugin('最终版权归kkk所有'),
new HtmlWebpackPlugin({
template:'index.html'
}),
new UglifyjsWebpackPlugin()
]
下面是上述提到问题完整的webpack.config.js代码
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
// publicPath: 'dist/', //跟url相关的到时候都会往这里来解读
},
module: {
rules: [{
test: /\.css$/,
//css-loader只负责将css文件进行加载
//style-loader负责将样式添加到DOM中
//使用多个loader时，从右向左
use: ['style-loader', 'css-loader'],
}, {
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
}]
}, {
test: /\.(png|jpg|gif|jpeg)$/,
use: [{
loader: 'url-loader',
options: {
//当加载图片小于limit时，会将图片编译成base64z字符串形式
//当加载的图片大于limit时，需要使用file-loader模块进行加载
limit: 8192,
name: 'img/[name].[hash:8].[ext]'
},
}]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test:/\.vue$/,
use:['vue-loader']
}
]
},
resolve:{
//alias-别名
extensions:['.js','.css','.vue'],
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
plugins:[
new webpack.BannerPlugin('最终版权归kkk所有'),
new HtmlWebpackPlugin({
template:'index.html'
}),
new UglifyjsWebpackPlugin()
]
}
