初入webpack,手把手记录(一)

2018-09-18 06:39:17来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 原谅转行小白比较笨,看了那么多的文档API仍是没学好webpack,这阵子公司闲决定把webpack学完,现在开始表演,希望获得老师转身!

1、开门见山首先就是安装,先安装node.js,然后打开命令行(cmd)安装webpack,执行命令:npm install webpack -g

ok,检查你是否安装好了 输入 webpack -v 出现版本号就是可以咯。接下来我们开始打包文件吧

2、首先让我们在本地创建一个文件  输入命令  mkdir wpk-test(wpk-test是文件名,爱叫啥叫啥),然后进入这个文件夹

3、然后我们打开编辑器,创建几个文件咯,首先建立一个src文件夹,里面有index,js、str.js。

我们在str.js写下我们要的代码,来个简单的吧,比如

function init(s){
    return s; } module.exports=init;

你是否会问module.exports=init;这句代码是什么?那么我悄悄告诉你

module.exports 对象是由模块系统创建的。在我们自己写模块的时候,需要在模块最后写好模块接口,声明这个模块对外暴露什么内容,module.exports 提供了暴露接口的方法。

懂了么,不懂我也没办法了,我只知道这么多,哈哈。

ok,现在在str.js写下了这个代码,那么现在我们去index.js文件里写下另外一段代码

var fn = (require('./str.js'));

document.write(fn('你好世界,biubiubibiu'));

  首先我们先看第一段代码,只是一个简单的函数,就是你穿个参数进去,传什么我就返回什么。然后在index.js里 我们定义一个变量 fn,括号里的require又要一些时间来解释了,这里先不解释,文末在解释。

别发呆了,快上车。代码接下来就是输出函数,传个参数进去。ok,这个时候你会问了,那现在html文件那些在哪?网页怎么显示?别急,马上来

我们建个html文件,然后引入js,引入哪个?str.js还是index.js?都不是,我们引入main.js,main.js从何而来?从来处来,我们重新回来cmd,执行命令

webpack --mode development
或者
webpack --mode production

  就已经打包好了,这个时候回到编辑器,是不是多了一个文件夹dist,里面有个js文件叫做main?那么你引入他们就好了

这个时候你打开页面,就可以看到效果了,这就是最简单的单文件打包了。

 

再来说一下require是什么东西:不想打字,想知道直接去看阮雪峰老师的博文吧http://www.ruanyifeng.com/blog/2015/05/require.html

 

整理一下刚学踩了几个坑;

刚开始是将文件统一放在一个层级下,那么打包时就出现了下面的情况:

1、当一切准备好了,兴高采烈的输入了 webpack str.js bundle.js,然后收获一串错误

The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D

为啥?因为是要我们安装webpack-cli,简单啊,那我就在项目本地装一个不就ok了

然后你又兴高采烈的输入了  npm install webpack-cli -D,然后再次执行打包命令,又收获了一串错误,

The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D

哦豁?原来是要在全局安装,那也还是很简单的嘛,卸载了重装不就好了,然后你又兴高采烈的输入了

npm uninstall webpack-cli

npm install -g webpack-cli

装好以后迫不及待的打包,结果又收获一串错,哈哈哈哈,怀疑人生?头皮发冷吗?

WARNING in configuration
The 'mode' option has not been set. Set  'mode' option to 'development' or 'production' to enable defaults for this enviroment.
ERROR in multi ./hello.js bundle.js
Module not found:ERROR:Can't resolve 'bundle.js' in 'C:/Users/你的用户名/Desktop/webpack-test'
@ multi ./hello.js bundle.js

  是因为没有配置mode选项,然后我们输入上面所说的两种命令

webpack --mode development
或者
webpack --mode production

结果又报错,对不起,我可能要去世了,不学了,先走一步。

少年,快完了,一步步来嘛,这个时候报错是

ERROR in Entry module not found:ERROR:Can't resolve './src' in 'C:/Admin/pc/Desktop/webpack-test'

就是说没有入口文件,那么我们继续创建就好了,将index.js或str.js一起丢进sec文件夹里,再来打包。其实这里还是有一个问题的。

webpack4.x的打包已经不能用webpack 文件a 文件b的方式,而是直接运行webpack --mode development或者webpack --mode production,这样便会默认进行打包,入口文件是'./src/index.js',输出路径是'./dist/main.js'

其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。 因此我们不再按webpack 文件a 文件b的方式运行webpack指令,而是直接运行,所以打包命令直接输入webpack --mode development或者webpack --mode production就好了

  好了,今天先到这,快去写bug吧!

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决

下一篇:js中对象转化成字符串、数字或布尔值的转化规则