美文网首页
webpack入门

webpack入门

作者: Jeanne_妮妮 | 来源:发表于2017-09-20 15:16 被阅读0次

    安装webpack

    在安装webpack前本地环境要支持nodejs

    npm install webpack -g

    创建项目

    创建一个目录: mkdir app 在该目录下创建一个js文件,a.js,代码如下:

    document.write("it works successfully.");

    在该目录添加index.html文件,代码如下:

    Document

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

    webpack a.js bundle.js

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

    创建第二个JS文件

    接下来我们创建另外一个 js 文件 b.js,代码如下所示:

    module.exports='it works from runoob2.js';

    更新 a.js 文件,代码如下:

    document.write('It works successfully.
    ');

    document.write(require("./runoob2"));

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

    webpacka.jsbundle.js

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

    LOADER

    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。

    所以如果我们需要在应用中添加 css 文件,就需要使用到 css-loader 和 style-loader,他们做两件不同的事情,css-loader 会遍历 CSS 文件,然后找到 url() 表达式然后处理他们,style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

    接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。

    cnpminstallcss-loaderstyle-loader

    执行以上命令后,会再当前目录生成 node_modules 目录,它就是 css-loader 和 style-loader 的安装目录。

    接下来创建一个 style.css 文件,代码如下:

    app/style.css 文件

    body{background:yellow;}

    修改 runoob1.js 文件,代码如下:

    app/a.js 文件

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

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

    webpacka.jsbundle.js

    插件

    插件在 webpack 的配置信息 plugins 选项中指定,用于完成一些 loader 不能完成的工。

    webpack 自带一些插件,你可以可以通过 cnpm 安装一些插件。

    使用内置插件需要通过以下命令来安装:

    cnpminstallwebpack--save-dev

    比如我们可以安装内置的 BannerPlugin 插件,用于在文件头部输出一些注释信息。

    修改 webpack.config.js,代码如下:

    app/webpack.config.js 文件

    varwebpack=require('webpack');module.exports={entry:"./runoob1.js",output:{path:__dirname,filename:"bundle.js"},module:{loaders:[{test: /\.css$/,loader:"style-loader!css-loader"}]},plugins:[newwebpack.BannerPlugin('菜鸟教程 webpack 实例')]};

    然后运行:

    webpack

    打开 bundle.js,可以看到文件头部出现了我们指定的注释信息。

    相关文章

      网友评论

          本文标题:webpack入门

          本文链接:https://www.haomeiwen.com/subject/xccssxtx.html