Webpack3简单入门1

DrizzleX 发布于2019-08-21 18:27 / 943人阅读

摘要：使用测试的使用教程。本工程代码创建工程安装新建一个配置文件内容添加工程内容内容内容编译运行说明如果过程中发生错误，会在工程根目录下自动生成文件。

使用 yarn 测试 webpack 的使用教程。

本工程代码

创建工程

</>复制代码 
$ mkdir test-webpack-app-yarn
$ cd test-webpack-app-yarn
$ yarn init
# ...

安装 webpack

</>复制代码 
$ yarn add webpack
# 新建一个 webpack 配置文件
$ touch webpack.config.js
# 内容：
module.exports = {
  entry: [
    "./index.js"
  ],
  output: {
    path: __dirname,
    filename: "bundle.js"
  }
}

添加工程内容

</>复制代码 
# index.js
$ touch index.js
# 内容：
document.write("Hello world, Webpack!")

</>复制代码 
# index.html
$ touch index.html
# 内容：
  
    
    Hello, Webpack

编译运行

</>复制代码 
$ yarn run webpack
$ open index.html -a Google Chrome

说明

如果过程中发生错误，yarn会在工程根目录下自动生成yarn-error.log文件。

关于 yarn

GPU云服务器云服务器简单入门 linux简单入门 python简单入门 hadoop简单入门

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

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

Webpack3简单入门2

摘要：本工程代码创建工程添加工程文件通过配置文件来使用添加文件。如下已多次提及的唯一入口文件打包后的文件存放的地方打包后输出文件的文件名是中的一个全局变量，它指向当前执行脚本所在的目录接下来只要执行即可。本工程代码创建工程 $ yarn init $ yarn add webpack # **添加工程文件：** # public/index.html Web...

Labradors 2019-08-21 18:27 评论0 收藏0
2017-06-21 前端日报

摘要：前端日报精选实践总结掘金第期动画与动效之四完全指南众成翻译个编码小技巧教程使用浏览器开发者工具检查动画性能众成翻译中文图书深入理解译变量的正确使用方法知乎专栏正式发布众成翻译来了知乎专栏代码运行过程简述一个人文章的中文 2017-06-21 前端日报精选 redux-react实践总结 - 掘金【第972期】HTML5动画与动效之四flexbox 完全指南 - 众成翻译19个Java...

Chao 2019-08-20 17:24 评论0 收藏0
ES6入门到进阶（一）：let、解构赋值、字符串模板、函数

摘要：注意问题，不在是运行时所在的对象箭头函数里面没有用箭头函数不能当构造函数下一篇入门到进阶二循环数组对象参考视频资料经典入门到进阶一、简介 ES6 -> ECMA 标准 ES6 -> 2015年6月 ES6.0 每年6月份，发布一个版本 ES6环境: webpack3.x Traceur 二、let、const 2.1 关于定义(声明)变量 var a=12; ...

WalkerXu 2019-08-26 11:47 评论0 收藏0
webpack系列——webpack3导入jQuery的新方案

摘要：但是，有时候可能的一些库不够牛逼，还需要用到的相关插件来辅助完成，这些插件又和形成了依赖，最终，和我一样，你也可能需要在中导入。关于异步打包组件的方案，请看我的其他文章只要你使用了，无论是，还是开发者也同样适用这种方案本文的目的拒绝全局导入jQuery！！拒绝script导入jQuery！！找到一种只在当前js组件中引入jQuery，并且使用webpack切割打包的方案！测试...

amc 2019-08-21 17:44 评论0 收藏0