初入webpack，手把手记录（一）

 原谅转行小白比较笨，看了那么多的文档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
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有