常见的模块化规范:CommonJS, AMD, CMD 也有ES6的Modules
var moduleA= (function(){
var obj={};
obj.name='module';
obj.flag=true;
obj.myFun=function(info){
console.log(info);
}
return obj;
})()
if(moduleA.flag){
moduleA.myFun("调用模块A中的方法")
}
CommonJS模块化的两个核心:导入和导出
module.exports={
flag:true,
test(a,b){
return a+b;
}
}
let {flag,test} =require("moduleA");
//等同于
let _mA = require("moduleA");
let falg=_mA.falg;
let test =_mA.test;
export的基本使用
let name='lee';
let age =18;
let height=160;
//用于导出对象
export{name,age,height}
//导出变量
export var num1=1000;
//导出函数
export function num1(a,b){
return a+b;
}
//导出类
export class Person{
constructor(name,age){
this.name=name;
this.age = age;
}
run(){
//方法
}
}
使用export指令导出了模块对外提供的接口可以使用import命令来接在对应的模块了
首先是需要在HTML代码中引入两个js文件,并且设置类型为module
import 导入的基本使用
//html
<script src='info.js' type='module'></scrpit>
//导入的名称必须和xxx.js导出的名称一致,否则会报错
import {name.age,height} from "./xxx.js"
export default 某些情况下,一个模块包含某个功能,我们并不希望给这个功能命名,而是让导入的人自己命名,这个时候就要用export default
//info.js
export default function(){
console.log("default function")
}
//main.js
import myFun from './info.js'
但是需要注意的是,同一个js文件中,不可以有多个export default
语句
从本质上讲,webpack是现代JavaScript应用的静态模块打包工具,webpack更加强调模块化开发管理
webpack模块打包,为了能够正常运行,必须依赖node环境,node环境中必须安装各种依赖包才能正常执行各种代码。所以node中的npm工具就是管理node中各种包文件的(node packages manager)
npm install [email protected] -g
cd 项目根目录
npm install [email protected] --save-dev
用webpack 打包的指令
cd 项目根目录
webpack <打包模块>.main.js <输出目录>.xxxjs
webpack配置
文件名称:webpack.config.js
//引入path
//npm init --生成package.json
//npm install --安装package.json中指定的依赖
//npm run build
const path = require('path')
module.exports={
entry:'./src/main.js',
//不建议这样写
//output:'./dist/build.js'
output:{
path:path.resolve(__dirname,'dist'),
filename:'build.js'
}
}
package.json
{
"name": "meetwebpack",
"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"
}
}
局部安装webpack并使用局部webpack
npm install [email protected] --save-dev
node_modulles/.bin/webpack
loader是webpack非常核心的概念,webpack主要是用来处理项目中的js代码,并且webpack会自动处理好js之间的相关依赖,但是在开发中我们也需要将less转换成css,或者将jsx,vue转换成js文件等等,对于webpack本身来说,这些功能是不支持的,但是将webpack扩展对应的loader就可以了
loader的使用过程
style-loader
,将模块到处作为样式放入Dom文件中//通过npm安装需要的css-loader
npm install --save-dev css-loader
//安装
npm install --save-dev style-loader
配置
module: {
rules: [
{
test: /\.css$/i,
//使用多个loader是从右向左读,所以后添加的loader应该放在数组最前面
use: [ 'style-loader','css-loader'],
},
],
},
webpack-less文件的处理 less-loader
注意: 如果安装的less-loader版本过高,会报错,需要调低less-loader的版本
less--Module build failed: TypeError: loaderContext.getResolve is not a function
需要指定安装的less-loader版本
//指定安装版本
npm install [email protected] --save-dev
//安装
npm install less-loader less --save-dev
//配置
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},{
loader: 'css-loader',
},{
loader: 'less-loader',
}
]
}
图片文件的处理 url-loader
引入url-loader
npm install --save-dev url-loader
//配置
{
test: /\.(png|jpg|gif|jpeg)$/i,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片,小于limit时, 会将图片编译成base64字符串形式
//当加载的图片大于limit时候, 会使用file-loader来解析图片,因此需要额外安装file-loader
limit: 13000,
/*指定打包的时候图片的名称,
即:创建img文件夹.按照原本的名称命名
+8位hash值,使用原来文件的后缀名称
*/
name:'img/[name].[hash:8].[ext]'
},
},
],
},
file-loader
安装好了file-loader
之后,webpack
会将图片打包到输出文件夹中,并将文件名重新命名,使用随机哈希数命名,但是这样做会引起一个问题,就是项目启动后,系统会由于没有配置图片的绝对路径而在浏览器中报错,找不到指定的文件,所以此时要在webpack.config.js
中添加一个publicPath
配置
output:{
path:path.resolve(__dirname,'dist'),
filename:'build.js',
//
publicPath:'dist/'
},
webpack ES6 转 ES5 babel-loader
如果将ES6转换成ES5,需要用到的是babel,在webpack中,直接使用babel对应的loader就可以了.
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
//配置webpack.config.js文件
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
npm install vue --save
第二步:在main.js中引入Vue对象
//引入Vue
import Vue from 'vue'
const app = new Vue({
el:'#app',
data:{
message:'hello'
}
})
安装Vue.js的依赖 不用添加-dev,因为-dev是开发时依赖,Vue在构建是会创建两个版本的代码,
runtime-only
, 在该代码中不允许有任何template
出现所以在运行的时候会报错,错误信息如下:
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.
解决方案:在webpack.config.js中添加配置
resolve:{
//别名,vue指向一个具体的文件,该文件包含了template
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
SPA(single page web application)通过路由跳转vue-router
el和template的区别
如果我们自定义组件,就需要修改index.html页面来修改组件,但是在实际开发中,我们并不希望手动频繁修改index.html页面,此时可以将在Vue对象中添加template
属性,
const app = new Vue({
el:'#app',
template:``,
data:{
message:'hello'
}
})
在Vue中如果同时存在el和template,在编译的时候,template就会将el所挂载的标签替换掉。但是问题来了,直接在template中写代码层次不清,再次优化抽离模板,使用组件化编程
import Vue from 'vue'
const App = {
template:`
{{message}}
{{name}}
`,
data() {
return {
message:'hello webpack',
name:'lee'
}
},
methods: {
btnClick(){
console.log("test");
}
},
}
const app = new Vue({
el:'#app',
template: ' ',
components:{
App
}
})
如果将App对象单独存放在一个js文件中,然后在main,js中导入该文件,就可以很大程度上降低模块的耦合度
同时也可以分离出一个组件文件,文件名称叫Vue Component ,然后在main.js文件中导入该文件,但是需要在使用该功能前,安装loader
npm install vue-loader vue-template-compiler --save-dev
//修改webpack.config.js文件
{
test: /\.vue$ /,
use: ['vue-loader']
}
vue-loader的版本如果>=13.0.0版本,就需要配置额外的插件
//webpack.config.js配置
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//....其他配置
plugins: [
// 请确保引入这个插件!
new VueLoaderPlugin()
]
打包文件添加上版权信息 BannerPlugin,属于webpack自带的插件,只需要导入即可
//webpack.config.js
const webpack = require('webpack');
plugins: [
// 请确保引入这个插件!
new webpack.BannerPlugin('最终版权归leesure所有')
]
现有的项目中,index.html是存放在项目的根目录下的,在真实的项目发布过过程中,发布的是dist文件夹的内容,而dist在打包的时候并没有index.html文件,所以我们需要将index.html文件也放入index.html文件打包的dist文件夹中,此时就需要 HtmlWebpackPlugin
插件。
HtmlWebpackPlugin插件的作用
安装插件的步骤
npm安装
npm install html-webpack-plugin --save-dev
//修稿webpack.config.js文件中plugins部分的内容
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin()
]
注意安装版本的问题,如果安装的版本过高,就会报错:
Cannot read property 'make' of undefined
需要将版本降低到3.2.0!!!
需要将版本降低到3.2.0!!!
需要将版本降低到3.2.0!!!
安装成功以后,会发现新生成的html文件中,并没有添加的标签,同时srcipt引入的的路径不需要添加上
dist/
路径,所以要对插件做进一步修改
//将webpack.config.js中的publicPath注释掉
publicPath: 'dist/'
//指定plugin生成html文件的模板
new HtmlWebpackPlugin({
template:'index.html'//传入参数
})
到此,问题解决.
在项目发布之前,我们需要将js文件进行压缩,需要使用第三方插件uglifyjs-webpack-plugin
并且指定版本号位1.1.1和CLI2保持一致
npm install uglifyjs-webpack-plugin@@1.1.1 --save-dev
//修改webpack.config,js文件使用插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
plugins: [
new UglifyJsPlugin()
]
webpack提供了一个可选的本地开发服务器,基于node.js搭建,内部使用express框架,可是实现浏览器自动刷新显示修改后的效果,不需要每次修改完页面后都要手动run build
一次
使用该本地服务器开发,需要安装一个模块
//此处指明了版本号
npm install --save-dev [email protected]
如果版本过高,则需要安装webpack-cli
,高版本的webpack-dev-server和webpack-cli是分离的
devServer是作为webpack中的一个选项,可以设置如下属性,
webpack.config.js的配置如下
devServer:{
contentBase:'./dist',
inline: true
}
//同时需要另外添加一个scripts,--open表示直接打开浏览器
//package.json
"dev":"webpack-dev-server --open"
开发时的配置文件可能和实际发布时候的配置文件可能有点差异,所以要做配置文件的分离,在文件的根目录下建立build
文件,然后建立三个文件夹
然后再package.json中修改script配置,指定启动的配置文件
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"