webpack打包js

Rango 发布于2019-08-22 15:16 / 1384人阅读

摘要：打包的两种方式命令行指定的配置文件使用命令行打包一创建两个文件创建，导出一个加法的函数，使用这个函数。二使用命令打包在当前目录下使用这里入口是输出文件是，这样就会看到文件中多出一个文件。创建一个文件运行，引入运行，控制台会打印。

webpack打包的两种方式

webpack entry output （命令行）

webpack -config webpack.conf.js (指定webpack的配置文件)

使用命令行打包js 一：创建两个js文件

创建app.js, sum.js，sum.js导出一个加法的函数，app.js使用这个函数。

// app.js

import {sum} from "./sum";
console.log("sum(21, 22)", sum(21, 22));

// sum.js
export function sum(a, b) {
    return a + b;
}

二：使用webpack命令打包

在当前目录下使用： webpack app.js bundle.js ; 这里入口是app.js, 输出文件是bundle.js，这样就会看到文件中多出一个bundle.js文件。

创建一个html文件运行，引入bundle.js运行，控制台会打印：sum(21, 22) 43 。

使用webapck的配置文件打包（还是上面的两个js文件）

创建一个webpack.conf.js，编写wepack的配置文件

// 配置文件使用commonjs规范

module.exports = {

    // 入口，是一个对象
    entry: {
        app: "./app.js"
    },

    // 输出
    output: {
        // 带五位hash值的js
        filename: "[name].[hash:5].js"
    }
}

在命令行输入：webpack --config webpack.conf.js，发现生成了一个app.dd1c6.js带hash的js文件。将这个js文件引入HTML里面发正常输出：sum(21, 22) 43

配置文件的命名为webpack.config.js，则直接在命令行输入webpack就可以。

webapck配合babel打包ES6、7 在项目根目录安装bable-loader和babel-core，babel-preset

使用npm init生成一个配置文件

npm install babel-loader babel-core --save-dev

新建app.js，index.html，webpack.config.js等文件

编写webpack.config.js

安装babel-preset来指定编译的版本：npm install babel-preset-env --save-dev

在app.js里面随便写一些ES6的语法

使用命令行输入webpack进行编译

webpack配置文件

// 配置文件使用commonjs规范

module.exports = {

    // 入口，是一个对象
    entry: {
        app: "./app.js" // 相对路径
    },

    // 输出
    output: {
        // 带五位hash值的js
        filename: "[name].[hash:8].js"
    },

    // 指定loader
    module: {

        // rules中的每一项是一个规则
        rules:[
            {
                test: /.js$/, // 值一个正则，符合这些正则的资源会用一个loade来处理
                use: {
                   loader: "babel-loader", // 使用bable-loader来处理
                   options: {  // 指定参数
                        presets: [
                            ["babel-preset-env", {
                                targets: {
                                    browsers: ["> 1%", "last 2 version"] //具体可以去babel-preset里面查看
                                } 
                            }]
                            
                        ] // 指定哪些语法编译
                   }
                },
                exclude: "/node_module/" // 排除在外
            }
        ]
    }
}

app.js和编译之后带hash的js

// app.js
let func = () => {};
const num = 30;
let arr = [3, 4, 5, 6];

let newArr = arr.map(item => item * 2); // 将以前数组每一项*2

console.log(newArr);



// ==================//
// 编译之后（直接截取了编译的代码）
"use strict";


var func = function func() {};
var num = 30;
var arr = [3, 4, 5, 6];

var newArr = arr.map(function (item) {
  return item * 2;
}); // 将以前数组每一项*2

console.log(newArr);

babel的两个插件：Babel Polyfill 和 Babel Runtime Transform

用来处理一些函数和方法（Genertor,Set,Map,Array.from等未被babel处理，需要上面的两个插件）

Babel Polyfill（全局垫片），npm install babel-polyfill --save, 使用：import "babel-polyfill";

Babel Runtime Transform（为开发框架准备），npm install babel-plugin-transform-runtime --save, npm install babel-runtime --save

新建一个.babelrc来进行配置

app.js里面新增代码

import "babel-polyfill";
let func = () => {};
const num = 30;  
let arr = [3, 4, 5, 6];

let newArr = arr.map(item => item * 2); // 将以前数组每一项*2

console.log(newArr);


// 需要babel-polyfill
arr.includes(8);

// Genertor 函数
function* func2() {

}

webpack配置

// 配置文件使用commonjs规范

module.exports = {

    // 入口，是一个对象
    entry: {
        app: "./app.js" // 相对路径
    },

    // 输出
    output: {
        // 带五位hash值的js
        filename: "[name].[hash:8].js"
    },

    // 指定loader
    module: {

        // rules中的每一项是一个规则
        rules:[
            {
                test: /.js$/, // 值一个正则，符合这些正则的资源会用一个loade来处理
                use: {
                   loader: "babel-loader", // 使用bable-loader来处理
                   options: {  // 指定参数
                        
                   }
                },
                exclude: "/node_module/" // 排除在外
            }
        ]
    }
}

.babelrc文件配置

{
    "presets": [
        ["babel-preset-env", {
            "targets": {
                "browsers": ["> 1%", "last 2 version"]
            } 
        }] 
    ],
    "plugins": ["transform-runtime"]
}

GPU云服务器云服务器 Webpack打包分块 js怎样打包移动端js图片打包 cdn按需打包js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93319.html

Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 有哪些功能(代码转换文件优化代码分割模块合并 ...

SunZhaopeng 2019-05-23 17:29 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack 有哪些功能(代码转换文件优化代码分割模块合并自...

wangbinke 2019-08-26 13:52 评论0 收藏0
使用模块化工具打包自己开发的JS库

摘要：平时有使用过和开发的同学，应该能体会到模块化开发的好处。原因很简单打包出来的使用了关键字，而小程序内部并支持。是一个模块打包器，可以将小块代码编译成大块复杂的代码，例如或应用程序。官网的这段介绍，正说明了就是用来打包的。博客地址最近有个需求，需要为小程序写一个SDK，监控小程序的后台接口调用和页面报错(类似fundebug) 听起来高大上的SDK，其实就是一个JS文件，类似平时开发...

AprilJ 2019-08-26 12:01 评论0 收藏0
基于webpack构建的angular 1.x 工程（一）webpack篇

摘要：基于构建的工程一篇现在都已经出到的版本了，可我对它的认识还是停留在的版本。然后是写启动的命令行，也就是上面的这样写的意思是，当你输入你的命令名字就会让执行你对应命令的语句。我们首先把基本的配置引进来。基于webpack构建的angular 1.x 工程（一）webpack篇现在AngularJS都已经出到4.x的版本了，可我对它的认识还是停留在1.x的版本。之前用它是为...

Anleb 2019-08-21 17:23 评论0 收藏0
[js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数

摘要：，我想大家应该都知道或者听过，是前端一个工具可以让各个模块进行加载预处理再进行打包。 webpack，我想大家应该都知道或者听过，Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包。现代的前端开发很多环境都依赖webpack构建，比如vue官方就推荐使用webpack.废话不多说，我们赶紧开始吧. 第一步、安装webpack 新建文件夹webpack->再在web...

pubdreamcc 2019-08-21 16:27 评论0 收藏0
傻傻分不清的Manifest

摘要：的英文含义是名单种技术的确都是把当做清单使用缓存清单清单打包资源路径清单打包清单只不过是在不同的场景中使用特定的清单来完成某些功能所以，学好英文是多么重要，这样才不会傻傻分不清到底是干啥的在前端，说到manifest，其实是有歧义的，就我了解的情况来说，manifest可以指代下列含义： html标签的manifest属性: 离线缓存（目前已被废弃） PWA: 将Web应用程序...

printempw 2019-08-23 17:58 评论0 收藏0