糖果派对官方网站_可以赌钱的糖果游戏_手机版
Webpack1 入门+实战

Webpack1 入门+实战

作者:网络编程    来源:未知    发布时间:2020-02-13 10:25    浏览量:

cnpm install extract-text-webpack-plugin --save-dev

app.js

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <h1>Hello Webpack</h1></body></html>

index.css

const res = function() { console.log('async res');}export default res;

接下去实行设置三个 loader

  1. 一声令下行中试行

再去查看 index.bundle.js 文件会意识 test 函数已经被去掉了

图片 1

image.png

本条错是因为大家并从未安装所采纳的 loader

  1. 当时会发觉写了一点东西编译出来的就这么的纷纷,所以须求化简在 webpack.config.js 文件中引进 webpack
cd Desktop
cd webpacktest
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><link href="https://www.hizyd.com/styles/index.css" rel="stylesheet"></head><body> <h1>Hello Webpack</h1><script type="text/javascript" src="/uploads/allimg/200213/10250A5E-1.jpg"></script><script type="text/javascript" src="/uploads/allimg/200213/1025063557-2.jpg"></script></body></html>
  1. 这时候去查看 build 文件夹,会发觉多了一个 index.html 文件

图片 2image.png

  1. 安装 webpack

装完之后在实施

施行顺序 $ webpack ,这时会发觉在 scripts 文件夹中自动生成了叁个0.bundle.js 文件,这么些是webpack 自动将您异步管理的 js 方法直接新建了一个js 文件放到了里面,这几个东西不会活动引入到 html 中,假诺引进了就成为同步了,这一个事物是在到服务器上的,会经过 load 异步的财富把它必要过去 这么些就是所谓的代码分割

var webpack = require('webpack');
// console.log(webpack);//测试 webpack 是否安装成功   

//最核心的模块,所有的东西都要在这里面进行
module.exports = {
    //配置入口资源
    //它的值可以是对象也可以是单一的一个
    entry:__dirname + 'src/scripts/app.js',
    //配置编译后的资源
    //将编译后的资源放到哪去
    output:{
        path:__dirname + 'build/scripts',
        //hash 表示的是:平常的 index.js 编译后就变成了 index.assxx.js
        filename:'[name]-[hash].js'
    }
}

编辑 index.es 文件

var index = require('./index');
require('../stylesheets/index');
index.fn('init index');
if(false != false){ console.log;}
  1. 编辑 index.es 文件
body{
    background: black;
    color: green;
}

图片 3image.png

//plugins -> 配置里新增new HtmlWebpackPlugin({ //生成的新文件的名称 路径的话 以上面配置的 output path: path.join(__dirname, './assets/') 为基准 filename:'index.html', //生成的新 html 文件 用到的 html 文件 template:'./index.html', inject:true })

图片 4

image.png

  1. 总结:
    loader 的用法

将 assets -> index.html 文件中的代码全部删掉

正如图所示即表示成功了

//-dev 是表示这个包只在生产环境使用,上线就用不着了cnpm install babel-loader --save-dev
npm install html-webpack-plugin --save-dev
  1. 安装 loader -> babel-loader
webpack

然后校勘 app.js 文件首先行

  1. 在施行顺序 $ webpack ,报如下错误
//先在全局安装
cnpm install webpack -g
//再在项目中安装
cnpm install webpack --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin');

出口如下图所示的二个对象 即表示成功了

图片 5

image.png

进行顺序 $ webpackindex.bundle.js 文件会来得如下

结果如下图所示,申明成功了

图片 6

image.png

  1. 花色伊始化,前提是全局已安装 webpack 那些模块

正如图所示表示成功了

index.bundle.js

webpack
cd Desktopcd webpacktest
var s = function(data) {
    //console.warn 向web 控制台输出一条警告信息
    console.warn(data);
}
//切记这里要按照模块的规范一样将要导出的东西导出,这里我们将函数 s 导出去了
module.exports.fn = s;
webpackJsonp([0],[/* 0 *//***/ (function(module, exports, __webpack_require__) {"use strict";var _data = __webpack_require__;__webpack_require__;// const data = 123;console.log(_data.data);/***/ }),/* 1 *//***/ (function(module, exports, __webpack_require__) {"use strict";Object.defineProperty(exports, "__esModule", { value: true});//es6 Map 参考链接:http://es6.ruanyifeng.com/#docs/set-map#Mapvar m = new Map();m.set('data', 'Index init');//导出一个函数var test = exports.test = function test() { console.log('test treeShaking');};//导出一个属性值var data = exports.data = m.get;/***/ }),/* 2 *//***/ (function(module, exports) {// removed by extract-text-webpack-plugin/***/ })],[0]);
  1. 率先在桌面新建贰个 webpacktest 文件夹
  2. 展开命令行工具,步入 webpacktest 文件夹中

装包

  1. 接下去正是引进相比基本的事物

成效如下图所示

cnpm install css-loader --save
cnpm install style-loader --save

参照链接:

  1. 编辑 index.html 文件
var webpack = require('webpack');
//最核心的模块,所有的东西都要在这里面进行
module.exports = {

}
  1. 以那时候候须要在 html 中校以此编写翻译过后的 .js 文件引过来,要求安装叁个包 html-webpack-plugin
var index = require('./index');
webpack
require('../styles/index.less');import {data} from './data.es';// const data = 123;console.log;
//module -> rules 配置里新增//配置 babel-loader options: { 'presets': [ ['es2015', { 'modules': false }], 'stage-0' ] }
  1. 编辑 index.less
  1. 在指令行中 webpacktest 目录下运作程序

图片 7

image.png

  1. 用 require 的方式

    图片 8

    image.png

  2. 在 webpack.config.js 文件中安插

    图片 9

    image.png

  3. 通过命令行的秘诀

    图片 10

    image.png

    常见的 loader

    图片 11

    image.png

  4. webpack 使用优化

图片 12

image.png

图片 13

image.png

图片 14

image.png

图片 15

image.png

图片 16

image.png

图片 17

image.png

图片 18

image.png

const ExtractTextPlugin = require("extract-text-webpack-plugin");
  1. 到花色中的 build -> scripts 文件夹中查看会发掘多了三个编写翻译后的 .js 文件

图片 19image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个webpacktest</title>
</head>
<body>
    Hello Webpack
<script type="text/javascript" src="scripts/main-dc8843a6a69bfa4cd69e.js"></script></body>
</html>

图片 20image.png

  1. 初叶编写制定文件
    index.js
npm init
  1. 接下去起始引进 css 文件
    编辑 app.js 文件
 cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnpm install less-loader --save-dev
  1. 能源管理 module 模块
    css 管理后实在会被打包到 js 里

在 webpack.config.js 文件中引进

webpack 主要的便是 webpack.config.js 中三个模块的构造。

执行顺序 $ webpack ,在翻看 index.bundle.js 文件,会发觉下面的 if 剖断自个儿是荒诞的东西 它会活动将全体 if 判定包罗在那之中的代码全都给您去掉

将 build ->scripts 中的四个编写翻译后的 .js 文件删掉

一而再再而三装包

这个时候在浏览器中开荒 build -> index.html 文件,css js 什么的就都有了

{ test: /.less$/i, use: ExtractTextPlugin.extract({ //fallback 的作用是所有的loader 都引用失败了 最后用我这个后面的loader fallback: 'style-loader', //正常情况下用的 loader use: [{ loader: 'css-loader' }, { loader: 'less-loader' }] }) }

图片 21

image.png

  1. 小心贰个难点是,上线时生成财富的门道要改为线上的地址
/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

var index = __webpack_require__(1);
index.fn('init index');

/***/ }),
/* 1 */
/***/ (function(module, exports) {

var s = function(data) {
    //console.warn 向web 控制台输出一条警告信息
    console.warn(data);
}
//切记这里要按照模块的规范一样将要导出的东西导出,这里我们将函数 s 导出去了
module.exports.fn = s;

/***/ })
/******/ ]);
cnpm install webpack --save
  1. 先是在桌面建贰个 webpacktest
  2. 在指令行中步向 webpacktest 文件夹

会报如下所示的错误

编辑 index.es 文件

实施顺序 $ webpack ,在查阅 index.bundle.js 文件,会发觉上边的 if 剖断间接就给您去掉了,间接将里面包车型地铁console 拿了出来示例2:

webpack

图片 22image.png

图片 23

image.png

plugins:[ new ExtractTextPlugin('styles/[name].css') ]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个webpacktest</title>
</head>
<body>
    Hello Webpack
</body>
</html>
require('../styles/index.less');const data = 123;console.log;

体现如下图所示代表推行成功了

並且会发觉 index.bundle.js 文件发出了改变 简化了大多,其实是把公用的 js 放到了 comment.js 文件中

这时运作程序

cnpm install html-webpack-plugin --save-dev

webpack.config.js

  1. 编辑 wepack.config.js 文件
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// console.log(webpack);//测试 webpack 是否安装成功   

//最核心的模块,所有的东西都要在这里面进行
module.exports = {
    //配置入口资源
    //它的值可以是对象也可以是单一的一个
    entry: __dirname + '/src/scripts/app.js',
    //配置编译后的资源
    //将编译后的资源放到哪去
    output: {
        path: __dirname + '/build',
        //hash 表示的是:平常的 index.js 编译后就变成了 index.assxx.js
        filename: 'scripts/[name]-[hash].js'
    },
    plugins: [
        new HtmlWebpackPlugin({ // Also generate a test.html 
            filename: 'index.html',
            template: __dirname + '/src/index.html'
        })
    ]
}
  1. 在类型中新建 webpack.cnfig.js 文件
  2. 在命令行中,给品种装 webpack 包

src -> stylesheets -> index.css
src -> scripts -> app.js
src -> scripts -> index.js
src -> index.html
build -> stylesheets
build -> scripts

  1. 在项目一流目录下新建一个 index.html 文件index.html
webpack
//与 plugins 模块平级的//这个里面是将引用的一些公共 模块放到这里,这样就可以全局使用了,避免重复调用 引用的话还是用 cdn 引用静态资源库里的东西 externals:{ jquery:'window.$' },
var index = require('./index.js');
index.fn('init index');

友情链接: 网站地图
Copyright © 2015-2019 http://www.tk-web.com. bb电子糖果派对有限公司 版权所有