webpack前端打包工具及其安装使用过程出现的问题

疑问为什么要使用webpack:

js中,一个模块想要使用另一个模块的变量,另一个模块必须将这个变量暴露为全局变量。

暴露为全局变量:

1,    var a

2,    function(){window.a}

3,    new  Vue()是全局变量

这会使得多模块互相覆盖全局变量的值。

node和浏览器都可以跑js,在浏览器下只能写为全局变量才能分享变量,但是node只需要把这个变量暴露出去就行,不会产生变量被覆盖的问题

在Node眼里,所有的文件都是一个模块,任何一个模块都有两个口,一个入水口,一个出水口。

扫描二维码关注公众号,回复: 3616300 查看本文章

var msg=‘yes';

module.exports={msg:msg}; (出水口)暴露出去自己的变量

var    a=require('../b.js').msg;(入水口)享用别人的变量

惊恐安装webpack:

1,webpack跑在Node环境下,使用时需要先在官网 https://www.nodejs.org下载node环境。

2,然后在cmd中命令行安装webpack:npm install -g webpack   (从npm下载安装包,比较慢)

(或者)cmd中:npm  install -g  cnpm --registry=https://registry.npm.taobao.org\  (从淘宝下载源码).

 局部安装:npm install --save-dev(-D)webpack

此时对文件进行打包可能出现错误,提示脚手架文件错误,因为在webpack4的版本里,CLI被单独分离出来了所以要我们单独安装  webpack-cli: npm i -g webpack-cli 安装完脚手架,按理讲是可以正常进行打包了

执行打包命令  webpack a.js bundle.js 结果还是出现错误 WARNING in configuration The ‘mode’option has.....

截图如下:

出现这个错误提示并不是我们环境装错了,而是webpack4 更新后对webpack语法进行了更严格的要求

之前的打包命令webpack a.js bundle.js被修订为 npx webpack a.js --output-filename bundle.js --output-path . --mode development 

这样就可以成功对文件进行打包了

偷笑小白补充:

打开powershell:  shift+鼠标右击

在被打包文件目录下启用powershell输入:npx webpack a.js --output-filename bundle.js --output-path . --mode development

入口文件名(a.js)   最终打包文件名(bundle.js)

服务器中安装的全局webpack版本号,不一定符合某个项目需要的版本,一般利用项目局部安装webpack解决。

1,进入项目文件,npm init -y在项目中生成文件package.json(位于模块的目录下,用于定义包的属性)此时npm认为这是一个模块

2,然后在这个项目中安装局部webpack:npm install -D webpack,安装完毕在项目中的packge.json文件最后自动产生版本信息“webpack": "^4.16.0"。

3,安装webpack-cli:npm install -D webpack-cli,安装完毕在项目中Packge.json文件产生版本信息:“webpack-cli": "^3.0.8"。

4,此时可以使用局部webpack打包:npx webpack a.js  --output-filename  buddle.js   --output-path  .  --mode development

完成!

如果觉得每次都输入npx webpack a.js --output-filename bundle.js --output-path . --mode development这么大段麻烦,可以修改packge.json元信息文件,在scripts增加命令pack(自定义命令):

这是在目标文件a.js目录中可以直接运行的命令,如果在其它目录下,比如a.js文件路径为:web\demo\a.js  ,你在web 目录下打开shell,则必须先进入a.js:cd  web\demo   然后:npm run pack就可以了

输入命令:npm run pack   即可完成打包工作

可以在项目目录中创建一个配置文件webpack.config.js:

将里面的入口文件,以及最终打包文件写入配置,则在packge.json文件中,命令pack可以省略入口出口文件

配置文件有很多参数,修改后可以简化工程,自行查找。

补充命令:

打开文件夹 web_demo:

cd web_demo

在node环境下执行文件a.js:

node a.js

检查npm版本号:

$ npm -v

升级npm:

npm install npm -g

安装常用的 Node.js web框架模块 express:

$ npm install express

查看所有全局安装的模块:

$ npm list -g

查看某个模块的版本号:

$ npm list grunt
卸载 Node.js 模块:

$ npm uninstall express

用以下命令查看包是否还存在

$ npm ls

更新模块:

$ npm update express

搜索模块:

$ npm search express

生成packge.json文件:

npm init -y

发布模块:

$ npm publish

把当前目录下node_modules子目录里边的对应模块更新至最新版本:

npm update <package>

把全局安装的对应命令行程序更新至最新版:

npm update <package> -g

撤销发布自己发布过的某个版本代码:

npm unpublish <package>@<version>

查看某条命令的详细帮助,例如npm help install:

npm help <command>


 

猜你喜欢

转载自blog.csdn.net/kalinux/article/details/81022261