Javascript - Vue - webpack

cnpm（node package manager）和webpack模块

npm是运行在node.js环境下的包管理工具，使用npm可以很快速的安装前端文件里需要依赖的那些项目文件，比如js、css文件等。首先需要通过npm命令在根目录创建一个packg.json配置文件，这个文件定义了你的项目所需要的各种模块，以及项目的名称、版本、许可证等元数据、以json格式配置项目所需的运行和开发环境。cnpm是npm的淘宝镜像，cnpm的指令与npm是完全一样的，把npm改为cnpm即可。

安装packg.json配置文件

cnpm init -y //在根目录安装packg.json，y表示yes，将略过所有问答，全部采用默认配置。安装成功项目根目录会出现package.json

安装jquery包

cnpm i jquery -S //安装jquery，大写的S表示save，表示把query添加到运行环境dep中。安装成功会出现node_modules目录，该目录存放了jquery文件

安装webpack

webpack的作用有两个

1.可以可以将js、css等文件模块打包，会自动分析你的项目结构，找到这些模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏

览器使用。比如js文件并不能引用其他js文件，除非使用ES6的语法import，这种语法现在很多浏览器并不支持，webpack可以对其转换打包成一个可以被浏览器解析的文件。

2.一个html页面上的link、javascript和img等标签总是会默认发起ajax请求向服务器索要html依赖的各种程序文件和图片、字体图标，这会造成页面加载速度不够理想。使用webpack后，由webpack统一管理这些耗时的每次请求，你不需要在每个html页面上引入那些繁多的程序文件、图片和字体图标，只需要引入同一个文件（装载了js、css等的引用）就可以解决所有引入的问题，这节约了页面加载的耗时。

//先全局安装webpack CLI
cnpm i webpack-cli -g //全局安装表示注册到计算机上，今后其它项目也可以使用，不需要重复安装
//再全局安装webpack
cnpm i webpack -g 
//卸载全局的webpack
cnpm uninstall -g webpack //可以用@指定版本号 ,如：cnpm uninstall -g webpack@3

package.json

这个文件里就是你的项目所需要的各种模块，它配置项目的开发环境。.json的文件里不能写注释，不能使用单引号。

{
    "name": "vue",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",        
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    //简称dep，在运行环境下会用到的配置
    "dependencies": {
        "jquery": "^3.4.1", //运行程序依赖于jquery，所以下载jquery时使用的是cnpm i jquery -S，S就是保存到运行环境
        "webpack-cli": "^3.3.2"
    },
    //简称dev，在生产环境下要用到的配置
    "devDependencies": {
        "webpack": "^4.31.0", //webpack等打包工具只是用来打包的时候用 ，运行发生在打包之后，所以打包工具放在生产环境里

　　//cnpm i webpack -D ，D就是保存到生产环境里。如果不写-S或-D则默认为-D
        "webpack-dev-server": "^3.3.1"
    }
}

指令的四种模式

cnpm i xxxmodule 安装到本地目录，node_modules目录（即本地目录）
cnpm i xxxmodule - D 安装到本地目录且注册到package.json的devDependencies（dep）生产环境中
cnpm i xxxmodule - S 安装到本地目录且注册到package.json的dependencies(dev)运行环境中
cnpm i xxxmodule -g 安装到计算机中，全局命令行可用，只要没写-g那就是安装到本地

webpack打包指令

//将入口的main.js包转换为浏览器可识别的出口bundle.js包
webpack .\src\main.js .\dist\bundle.js  
新版命令：webpack .\src\main.js -o .\dist\bundle.js  

webpack手动打包

在vscode中，创建如下目录和文件

打开终端输入cnpm指令

1.cnpm init -y 安装packge.json

2.cnpm i jquery -S 安装jquery包

3.cnpm i webpack-cli -g 安装全局的webpack CLI

4.cnpm i webpack -g 安装全局的webpack

5.接下来在main.js中输入一段测试代码，打开浏览器测试效果

//在main.js中通过ES6的语法引入jquery包，浏览器不识别ES6的语法格式，所以需要用webpack对此文件进行转换，转换结果在dist/bundle.js里

import $ from "jquery"
$(function() {
    alert("hello");
});

//使用webpack打包main.js
webpack .\src\main.js .\dist\bundle.js，如果你用的最新版本：webpack .\src\main.js -o .\dist\bundle.js

//在index.html中直接引入bundle.js即可
<script src="../dist/bundle.js"></script>

webpack.config.js

如不喜欢每次转换都提供入口和出口文件路径，可以考虑在项目根目录创建一个webpack.config.js文件，将入口和出口路径配置在该文件中。这样，下次打包时只需要输入webpack即可。

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"/src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"/dist"),
        filename:"bundle.js"
    }
}

webpack-dev-server模块（自动打包）

这个是终极绝招，它可以自动监视你对程序的修改且可以将改动即时反应在浏览器上。也即，你不需要手动写转换打包的指令，连webpack指令也不需要写。具体操作如下

1.cnpm init -y 安装packge.json

2.cnpm i jquery -S 安装jquery包

3.cnpm i webpack-cli -g 安装全局的webpack CLI

4.cnpm i webpack -g 安装全局的webpack

5.cnpm i webpack-cli -D 安装本地（当前项目）的webpack CLI

6.cnpm i webpack -D 安装本地（当前项目）的webpack

7. cnpm i webpack-dev-server -D 安装本地的webpack-dev-server

7.在package.json文件中的scripts属性中添加一条

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",  
  "dependencies": {
    "jquery": "^3.4.1",
    "webpack-cli": "^3.3.2"
  },
  "devDependencies": {
    "webpack": "^4.31.0",
    "webpack-dev-server": "^3.3.1"
  }
}

8.在当前项目的根目录创建webpack.config.js，添加以下代码

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"./src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    }
}

9.在index.html中引入还未打包的bundle.js，这个文件经过webpack-dev-server自动处理后会生成到内存中，而不再是dist目录

<script src="/bundle.js"></script>

10.执行cnpm run dev（终止cnpm run dev：在命令窗口按ctrl+c），输出以下信息

在浏览器输入http://localhost:8080打开网站点击src目录下的index.html文件查看效果。现在你对项目的js文件改动后，webpack-dev-server会立即作出响应并反映在浏览器上。

托管站点根目录

有两种方式可以托管站点根目录，第一种是通过在package.json的scripts中为dev指定参数来设置托管的根目录，被托管的目录会被当做站点根目录：

"dev": "webpack-dev-server --open"

"dev": "webpack-dev-server --open --port 3000" //自定义端口号

"dev": "webpack-dev-server --open  --contentBase src" //自定义托管的站点根目录，这会导致cnpm run dev时自动打开托管目录下默认的index.html

"dev": "webpack-dev-server --open  --hot" //热重载，每次改动时不会重新生成一个bundle.js，而是将局部修改的代码反映在已经生成过的bundle.js中，这样做会使当你改动js代码后浏览器立即刷新（刷新按钮有反映）才会呈现改动后的结果，使用hot时只有css不会刷新页面

第二种方式是通过在webpack.config.js的devServer中指定参数来设置托管的根目录，被托管的目录会被当做站点根目录

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"./src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    devServer:{
        open:true,
        hot:true,
        port:3000,
        contentBase:"src" //托管的站点根目录设为src而不再是vue
    }
}

引用node_module目录下的程序包

不管你托管的目录是vue（本页面例子中的根目录）还是托管的vue下面的src目录，在引用通过cnpm指令安装的程序包（jquery、bootstrap等文件）时，jquery、bootstrap本身是在node-module目录，如果你的站点根目录是src，也不用担心无法引入与src同级别的node-module目录下的文件。也即不管托管哪个目录，都是使用以下方式引入node-module目录下的包，都会去node-module去找，不用手动写/node-module/bootstrap……

import $ from "jquery" //node-module目录的文件固定这样引用
import "bootstrap/dist/css/bootstrap.css" //node-module目录的文件固定这样引用

css打包

webpack默认值支持js文件的打包，要打包css需要安装专门处理css的loader模块

1.cnpm i style-loader -D 本地安装style-loader模块

2.cnpm i css-loader -D 本地安装css-loader模块

3.在webpack.config.js中注册模块

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"./src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    devServer:{
        open:true,
        hot:true,
        port:3000,
        contentBase:"src"
    },
    //配置第三方模块的加载器
    module:{
        rules:[
            {test: /\.css$/,use:['style-loader','css-loader'] } //以css结尾的文件用这俩模块进行处理

　　　 //当webpack发现使用inport引入css文件时，它会到配置文件中去查找module-rules里注册的处理程序

　　    //webpack从右向左调用，先调用css-loader再调用style-loader，数组内的项顺序不能改动。           

        ]
    }
}

4.在src目录创建css目录，在css目录创建index.css

#box{
    font-size:150px;
    color:red;
    font-weight:bold;
} 

5.在src目录的main.js文件中添加以下引入css文件的代码

import $ from "jquery" //jquery安装在本地
import "./css/index.css" //其中./表示当前目录，不能直接写css/index.css，否则报错
$(function() {    
    alert("webpack");
});

6.在src目录的index.html中添加如下代码

<div id="box">webpack</div>

最后运行cnpm run dev看效果 

处理css文件中的url

#box3{
    background:  url('/img/1.PNG') ;  
    height:200px;
}

webpack不能处理url地址，这些url地址指向了图片、字体等。这需要安装url-loader来处理，而url-loader又依赖于file-loader

1.cnpm i file-loader -D

2.cnpm i url-loader -D

3. 注意你的webpack托管的是哪一个目录，现在假设你的图片路径为：vue/src/img/1.png。那么如果你的托管的根目录是你的项目根目录vue，则你在css文件中的url为：/src/img/1.png。如果你把src设为站点根目录，比如你把在webpack.config.js文件中的devServer属性的contentBase设src为托管目录，而你的项目根目录本来是vue，那么你在css文件中设置的url为：img/1.png

在webpack.config.js注册url-loader

module: {
    rules: [
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        { test: /\.(png | jpg | gif | ttf | jpeg)$/, use: 'url-loader' }
    ]
}

url-loader默认不会把图片生成为base64的编码，但base64编码有利于网络传输，一般情况下应该将小图片转换为base64，大图不适用。可通过配置module的rules来实现自动识别小图并转换

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader?limit=2742' } <2742字节会被转换，经测试无效，原因不明

处理字体图标

比如bootstrap、阿里的iconfont等就有很多字体图标，需要设置过滤规则，用url-loader进行处理

{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },

打包less

与css是一样的设置方式，先在src-css目录创建index.less文件

#box2{
    p{
        font-size:50px;
        background: "#000";
        color:red;
    }
}

在main.js引入less

import "./css/index.less"

在webpack.config.js注册less-loader

//配置第三方模块的加载器
module:{
    rules:[
        {test: /\.css$/,use:['style-loader','css-loader'] }, 
        {test: /\.less$/,use:['style-loader','css-loader','less-loader']} //以less结尾的文件用这两模块进行处理
    ]
}

cnpm i less -D 本地安装less，less-loader模块依赖于less模块

cnpm i less-loader -D 本地安装less-loader模块

打包sass

同上，loader需要：node-sass、sass-loader 

//配置第三方模块的加载器
module:{
    rules:[
        {test: /\.less$/,use:['style-loader','css-loader','sass-loader']}
    ]
}

打包js文件

webpack只支持一些不算太高级的ES6语法，要完整支持ES6高级语法，需要安装babel-loader，有babel-loader是一个js高级语法编译器，它处理之后会自动交给webpack打包到bundle.js

1.cnpm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D 

2.cnpm i babel-preset-env babel-preset-stage-0 -D

注：babel-loader必须是7.1.5，其它版本装了报错。

在webpack.config.js注册babel-loader

module: {
        rules: [          
            { test: /\.js$/, use: 'babel-loader',exclude:/node_modules/ } //exclude设置被babel-loader编译所排除的目录，如果这个目录被转换，耗时很长而且不能成功运行
        ]
 }

在项目根目录（与package.json同级）创建一个.babelrc的json文件（注：文件名起始处带.号，不带json后缀名）用于注册babel-loader所使用的插件和语法

{
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

在main.js中写测试代码

class Person{
    static personCount=100;
}

alert(Person.personCount);

import时的路径提示工具

安装扩展工具：Path Intellisense后，在设置种打开json配置输入以下红色部分的代码

{
    "editor.renderLineHighlight": "gutter",
    "editor.mouseWheelZoom": true,
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
    }    
}

在项目根目录下创建jsconfig.json，该文件与package.json同级

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

模块的导入导出

所有的css、js文件包都可以看成是一个一个的模块，在需要引入这些模块的js文件中可以通过node.js或ES6的导入导出功能，导入是为了能够引用像jquery这样的对象，导出是为了将某个对象暴露给外部供外部调用。不管使用这两种方式之间的哪一种，导入导出的代码只能成对出现，不能用ES6导入再用node导出。

在src目录新建一个js目录，创建一个person.js的文件。

node的导入导出

在person.js中输入以下代码来导出一个对象

module.exports={
    id:1,
    name:"sam"
}

在需要引入person.js模块的其它js文件中，输入以下代码来导入一个对象

var Person=require("./js/person.js");
alert(Person.name);

ES6的导入导出

在person.js中输入以下代码来导出一个对象

export default{
    id:1,
    name:"sam"
}
//或
var p={
    id:1,
    name:"sam"
}

export default p;

在需要引入person.js模块的其它js文件中，输入以下代码来导入一个对象

import Person from "./js/person.js"
alert(Person.name);

非默认的导入导出

export只能导出一个默认的变量，如果需要导出多个变量，可以如下使用

导出

var p={
    id:1,
    name:"sam"
}
export default p;
export var msg="寒食" //变量必须紧跟在export 后定义，不能是这样：export msg
export var result={
    money:0
}

导入第三方的包和自定义的包

import person,{msg as mg,result} from "./js/person.js"
alert(mg);
alert(result.money);
alert(person.name);

安装在node-modules目录中的js包和css包的导入

import Vue from "vue" //直接写包的名字即可导入vue对象
import "Bootstrap/dist/css/bootstrap.min.css" //不用写node-modules目录，直接写在node-modules目录下的Bootstrap目录下的bootstrap文件的路径

自定义的包的导入

import Person from "./js/person.js" //自定义的包需要提供完整的相对路径
import "./css/mainStyle.css" //为什么是用相对路径?因为webpack打包后网站才会启动，在打包之前没有这个站点，不能使用类似网站根路径的形式去获得需要导入的文件

 

常用指令

cls //清除控制台信息
ctrl + c //终止控制台程序的执行
cnpm info 包名//查看包的版本号
cnpm uninstall 包名 //卸载包

移植配置

如果之前已经安装好各个程序包，现在想移植配置到新项目中，可以复制除node-modules目录以外的所有文件到新项目中，然后在根目录打开powershell，输入cnpm i即可自动将配置中的包全部安装。此处有打包好的目录结构和配置文件：下载（包括本页所安装的包及其vue相关的包），只需要运行一下npm i即可

 

*处理工具xxx-loder在webpack1.0版本不需要后缀loader

* 如果项目运行失败的错误是端口号问题，可能是端口号被占用，关闭vscode重新打开或打开windows资源管理器，结束进程即可

Javascript - 学习总目录

转载于:https://www.cnblogs.com/myrocknroll/p/10863309.html