在vs code中使用webpack4.29.6打包项目入门和一些问题

原创 野人  2019-04-08 10:36  阅读 63 次

这段时间都在学习Vue,实在是太强大了,当然了,学习确实很累,应该要完整的使用Vue,学习Vue里面大大小小涉及到的东西有很多,只有记住它,多打代码才能更好的使用它,为我们做事!

在学习的过程中,遇到了很多问题,其实最烦恼的是webpack因为这个东西之前只是有个印象,但是并没有去操作它,所以曾着清明这几天,把它好好的了解下,网上教程真心有点乱,有点多,我是基于看了N多,然后总结起来,说实话第一次配置起来是真心有点麻烦,繁琐,但是多配置几次就好了,这东西,你要用它必须要会配置,如果单纯用别人生成好的脚手架,到时候出现问题,不懂解决,就会浪费很多时间,所以学习的时候尽量打好基础,当然了,自己写的文章,可能只有自己看得懂,而且这篇文章是在markdown上编辑好的,但是换到wp的编辑器上就一塌糊涂,我是真的懒得再折腾了,大家将就的看吧,本文篇幅有点长,需要认真看,希望,大家看完有所收获,那是再好不过了,如果有哪里不对的,也请指教!谢谢!

关于webpack我的理解就是把多个静态文件合并到一个文件里面去,减少多次请求。其实它深奥的,老手勿怪!

我的环境条件:Win7X64
首先,要使用webpack,一定要先下载node.js,因为NPM就是用node.js写的,关于node.js版本选择的话,有个版本是LTS(Long Term Support),我选择的是这个版本,然后就是软件的安装过程我就不多介绍了,狂点下一步,装好之后,就有个了个NPM包管理器,测试下是否安装成功:

1、`Win+R`调用命令,输入`cmd`打开命令提示符
2、输入`node -v`和`npm -v`如果有返回对应的版本信息就说明安装成功!

上面的准备工作做好之后,就可以准备迈入webpack的大门,来看步骤:

第一步:在本地磁盘创建好项目文件夹如(webpack-project),然后`Win+R`,输入`cmd`打开命令提示符,一定要先进入到自己刚才创建好的项目文件夹下,然后再运行`npm init`初始化项目,这时候在webpack-project文件夹下会有个package.json文件,就说明初始化成功。

第二步:在你创建好的webpack-project文件下,在创建这几个文件夹

1.dist,存放正式发布的项目文件

<!dcotype html>
<html>
<head>
	<title>web page</title>
    <script src="bundle.js"></script>
</head>
<body>
<p id="box">this is p tag</p>
</body>
</html>

2.src,存在资源路径

+ index.js——是在src下创建一个index.js做主要的入口,内容如下

 
import $ from "jquery"
$(function(){
    $("#box").css("color","red");
    console.log("ok");
})

3.webpack.config.js——插件配置文件,内容如下

 
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

第三步:`npm i jquery`安装js模块,因为在我们的项目中有引入到,所以我们要装jquery,这步的命令,网上有的写,要把这个包装到生成坏境中,所以要在命令后面加 --save-dev 参数,其实现在不需要了,默认安装好模块,就是在package.json文件中d的dependencies字段。

第四步:`npm install webpack`,这条命令可简写为`npm i webpack`,现在新版的webpack都需要再安装一个webpack-cli,所以我们把命令修改下`npm i webpack webpack-cli`,就可以在开始的时候就同时装好这两个软件,之所以一开始不这样,是因为之前的老版本不需要再安装一个,再说,如果你刚开始没安装webpack,到最后打包的时候,还是会提示你按照,你只要点下yes,那时候也会自动帮你安装好,也是很方便的。

第五步:在package.json,定义好webpack的启动脚本,打开package.json找到script字段,在原有的test下面在增加个
>"dev": "webpack"

最后就可以用打包了,输入`npm run dev`,即可完成打包,打包好后,就会在dist文件夹下,生成一个bundle.js文件

整理下思路:运行打包命令——找到打包的配置文件(webpack-config.js),配置文件里面有配置输出的文件夹名称(filename)和文件的路径(path),这里用到的都是node语法,所以需要去了解node——打包完成!

还有个之前看教程,有提到过webpack-dev-server,这个其实就是webpack的升级版,就是用来解决webpack的不足(每次修改后,都需要重新编译),webpack-dev-server就能解决这个问题,但是用webpack-dev-server也是要安装webpack的。

还有个点,webpack只能打包js文件,如果需要打包css,less文件就需要在其基础上在安装插件,然后再配置webpack-config.js文件,我是觉得对于初入webpak的,先了解,完成一次打包后,再其基础上再讲其他的,可能效果更好,网上的教程就是把太多步骤放在一起了,新手一看就懵逼了,你这也是我在找教程中,浪费最多时间的,还有就是你的坏境和设备版本跟教程中的都不一样,所以导致出现各种bug。所以一份好的教程,真的可以省下不少事情!

本文地址:http://www.yerenwz.com/306.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论