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

Javascript - Vue - webpack相关推荐

  1. Vue + webpack 项目实践

    最近在内部项目中做了一些基于 vue + webpack 的尝试,在小范围和同事们探讨之后,还是蛮多同学认可和喜欢的,所以通过 blog 分享给更多人. 首先,我会先简单介绍一下 vue 和 webp ...

  2. vue webpack打包入口文件是哪个_Vue 学习笔记（二十五）：webpack 相关

    Webpack 是什么 Vue CLI Webpack 相关 Webpack 更多参考官方文档 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定 ...

  3. 一字一句的搞懂vue-cli之vue webpack template配置

    webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...

  4. 0. 一字一句的搞懂vue-cli之vue webpack template配置

    此篇文章地址:  https://www.cnblogs.com/xyyt/p/9117361.html webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对 ...

  5. 用vue+webpack搭建的前端项目结构

    上个项目第一次用到vue+webpack,也是我第一次尝试自动化.模块化的开发方式,总的来说就是结构太烂,开发体验差,效率低,难维护.细数的罪状有如下几条 没有servies层,全部ajax接口都和逻 ...

  6. vue 判断页面加载完成_在Vue+webpack中详细讲解基础配置

    这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...

  7. 从零构建vue+webpack （一）

    写在前面: 给自己看,日常写业务有点儿繁琐,尝试着用vue+webpack 从零开始构建一个项目! 1.新建项目文件夹 运行命令 npm init (一路回车或者-y) 2.打开项目,新建src 文件 ...

  8. 踩坑之旅：springboot+vue+webpack项目实战（一）

    2019独角兽企业重金招聘Python工程师标准>>> 网上关于springboot的小项目很多,node.js+vue的项目也很多,但是好像没有两者合一的项目,最近在想实践下将两者 ...

  9. [vue] webpack打包vue速度太慢怎么办？

    [vue] webpack打包vue速度太慢怎么办? 升级webpack4,支持多进程 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣 ...

最新文章

  1. MarshalHelper
  2. 如何把很多照片拼成一张照片_一张现场照片引发的中韩之争
  3. VC++中忽略所有默认库纯Win32 API编译及链接 - 计算机软件编程 - Wangye's Space
  4. java mysql geo_GEO数据库简介
  5. java字符的输入流_Java:字节流和字符流（输入流和输出流）
  6. windows文件保护_Windows系统下媲美时间机器的系统备份工具，统统免费
  7. 其中一个页签慢_房建工程全套技术交底，720页Word版表格，各分部分项全覆盖...
  8. DeFi借贷协议Liquity宣布主网将于4月5日上线
  9. 解决新电脑的系统安装问题：针对BIOS的UEFI模式
  10. Spring_Hibernate
  11. 20.变量及数据类型
  12. mysql 优化max_Mysql 优化
  13. 直播视频网站源码，静态时钟
  14. 可以下载全球气象资料的网站
  15. SMAA算法详解 - AreaTex
  16. 前端实现三角形的四种方法
  17. 35BYJ46步进电机
  18. Word2019建立自己的模板
  19. Google地图之野望：你所不知道的背后故事
  20. Hadoop Mapreduce组建 核心环形缓冲区 RingBuff 原理及Go实现

热门文章

  1. 如何管理并设计你的口令
  2. mysql dba系统学习（2）了解mysql的源码目录及源文件
  3. python pickle模块
  4. OpenCV之Python学习笔记（1）（2）： 图像的载入、显示和保存 图像元素的访问、通道分离与合并
  5. boost源码剖析之：Tuple Types(rev#2)
  6. 鸟哥的Linux私房菜(基础篇)-第一章、Linux是什么（一.1.Linux是什么）
  7. 【Machine Learning】回归学习与示例
  8. Android AsyncTask源码解读
  9. jmeter将响应结果由Unicode转码成中文展示
  10. 修改oracle用户登录密码