webpack 菜鸟教程bug 修正

菜鸟教程链接地址点击打开链接http://www.runoob/w3cnote/webpack-tutorial.html

安装 Webpack

使用 cnpm 安装 webpack：

cnpm install webpack - g

在此我没有使用淘宝npm镜像，直接使用npm安装    报错

npm install webpack -g

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules

npm ERR! path /usr/local/lib/node_modules

npm ERR! code EACCES

npm ERR! errno -13

npm ERR! syscall access

npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'

npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']

npm ERR!   stack:

npm ERR!    'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',

npm ERR!   errno: -13,

npm ERR!   code: 'EACCES',

npm ERR!   syscall: 'access',

npm ERR!   path: '/usr/local/lib/node_modules' }

npm ERR! 

npm ERR! The operation was rejected by your operating system.

npm ERR! It is likely you do not have the permissions to access this file as the current user

npm ERR! 

npm ERR! If you believe this might be a permissions issue, please double-check the

npm ERR! permissions of the file and its containing directories, or try running

npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:

修正： sudo npm install webpack -g

创建项目

终端输入

mkdir app

默认在当前目录创建（即输入终端命令时的$符号前的目录）

在 app 目录下添加 runoob1.js 文件

在 app 目录下添加 index.html 文件

接下来我们使用 webpack 命令来打包：

注意：一定要cd到app目录下在输入下面的命令

webpack runoob1 . js bundle . js

会报错，如果webpack版本高的话；

ERROR in multi runoob1.js bundel.js

Module not found: Error: Can't resolve 'bundel.js' in '/Users/****'

 @ multi runoob1.js bundel.js +1

ERROR in multi runoob1.js bundel.js

Module not found: Error: Can't resolve 'runoob1.js' in '/Users/****'

 @ multi runoob1.js bundel.js +0

修正： webpack runoob1.js  -o bundle.js

执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件

webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。 在页面启动时，会先执行 runoob1.js 中的代码，其它模块会在运行 require 的时候再执行。

---

LOADER

require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!，当然我们可以根据模块类型（扩展名）来自动绑定需要的 loader。 将 runoob1.js 中的 require("!style-loader!css-loader!./style.css") 修改为 require("./style.css") ：

app/runoob1.js 文件

require ( " ./style.css " ) ; document . write ( require ( " ./runoob2.js " ) ) ;

然后执行：

webpack runoob1 . js bundle . js -- module - bind ' css=style-loader!css-loader '

会报错，没解决

显然，这两种使用 loader 的方式，效果是一样的。

---

配置文件

我们可以将一些编译选项放在配置文件中，以便于统一管理：

创建 webpack.config.js 文件，代码如下所示：

app/webpack.config.js 文件

module . exports = { entry : " ./runoob1.js " , output : { path : __dirname ,//_dirname is not defined 修正两个下划线，__dirname是全局变量 filename : " bundle.js " } , module : { loaders : [ { test : /\. css $/, loader : " style-loader!css-loader " } ] } } ;

报错，新版本 不识别loaders 

Users/********/webpack.config.js:9

{test:/\.css$/,loader"style-loader!css-loader"}

                    ^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected string

    at new Script (vm.js:74:7)

    at NativeCompileCache._moduleCompile (/Users/momo/node_modul

 更正 loaders 改为 rules

接下来我们只需要执行 webpack 命令即可生成 bundle.js 文件：