webpack入门

Vixb 发布于2019-08-26 18:28 / 1592人阅读

摘要：创建项目文件夹创建文件安装只能打包或文件，要打包其他类型的文件，需要用到打包工具打包文件项目下新建文件，文件名自己定义执行命令，表示将此文件打包到文件下，这个文件夹系统会新建出来打包数据新建文件，里面写入数据，执行命令与打包相似配置

1 创建项目文件夹 : webpack_test
2 创建文件 package.json
3 安装webpack
npm install webpack -g npm install webpack --save-dev

webpack 只能打包js 或 json 文件，要打包其他类型的文件，需要用到打包工具loader
webpack 打包js文件
1 项目下新建src/js/entry.js文件，文件名自己定义
2 执行 webpack src/js/entry.js dist/js/bundle.js 命令，表示将此js文件打包到dist/js/bundle.js文件下，这个文件夹系统会新建出来
webpack 打包json 数据
新建 test.json文件，里面写入数据，执行命令与打包js相似

webpack.config.js配置
新建webpack.config.js文件，配置该文件
const path=require("path");
module.exports = {
entry: "./src/js/entry.js",
output:{

    filename:"bundle.js",
    path: path.resolve(_dirname,"dist/js/")

}
}

当配置好这个文件后，直接执行webpack命令，就能将所有需要打包的文件打包到dist/js/bundle.js里

接上面添加如下代码：热加载配置
devServer:{

contentBase: "dist/"  //webpack-dev-server默认服务于根路径下的index，添加这句表示服务于dist目录下的

}

使用插件
常用插件 : html-webpack-plugin 根据模板html生成引入script的页面 clean-webpack-plugin 清除dist文件夹

云服务器私有云 webpack入门 webpack _webpack webpack cdn

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

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

webpack -> vue Component 从入门到放弃（一）

摘要：本身也是运行在环境中的模块，它通常会返回一个函数。这个命名规则和搜索优先级顺序在的中定义。那就等下一篇介绍吧，一篇文章有太多内容，会让人很乏的从入门到放弃四从入门到放弃二从入门到放弃三源代码此篇文章仅仅是整理自己接触webpack的入门过程，可能有很多不正确的地方，希望大家谅解，并指出错误帮助改进。对于webpack的介绍和前期对他的入门使用，我觉得官方（中文网）已经介绍的很简单了...

Ashin 2019-08-20 14:34 评论0 收藏0
webpack入门学习手记（一）

摘要：争取早日能完全抛弃掉中文文档，最终可以翻译英文文档，输出英文文档。待续相关文章入门学习手记一入门学习手记二入门学习手记三入门学习手记四本人微信公众号：前端修炼之路，欢迎关注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用过gulp、grunt，但是一直没有学习过webpack。这两天刚好有时间，学习了下...

mengera88 2019-08-23 14:01 评论0 收藏0
webpack -> vue Component 从入门到放弃（三）

摘要：离上一篇已经一个星期了，人的拖延症是没法救的，今晚趁着蒙蒙春雨，来抒发抒发情感。插件的使用一般是在的配置信息选项中指定。本身内置了一些常用的插件，还可以通过安装第三方插件。从入门到放弃四从入门到放弃二从入门到放弃一源代码离上一篇已经一个星期了，人的拖延症是没法救的，今晚趁着蒙蒙春雨，来抒发抒发情感。上一篇简单介绍了webpack的配置，这里稍微再做一一下延伸插件插件可以完成更多 ...

array_huang 2019-08-20 14:48 评论0 收藏0
webpack 实践笔记（一）--- 入门

摘要：实践笔记入门一官网文档地址实践工程地址本篇文章可切换到分支查看源代码。简单分步实践创建一个空文件夹，进入全局安装创建文件创建执行命令这个时候项目中多了一个文件，使用标签将其引入到中在浏览器中打开文件，页面出现文字。 webpack 实践笔记入门（一） [webpack官网文档地址]:（http://webpack.github.io/docs...） [实践工程地址]: (https:...

bergwhite 2019-08-20 11:03 评论0 收藏0
webpack -> vue Component 从入门到放弃（二）

摘要：我们可以根据模块类型扩展名来自动绑定需要的。当需要加载的文件匹配的正则时，就会调用后面的对文件进行处理，这正是强大的原因。这篇就这样吧，感觉进度有点慢从入门到放弃四从入门到放弃一从入门到放弃三源代码 Foreword 上一篇简单介绍了webpack的打包功能，应该说是比较无意义的打包，对于开发人员来说，这种效率是非常低的。所以我们来点升华。 First Step 我们给第一篇例子中加个...

DobbyKim 2019-08-20 14:37 评论0 收藏0
webpack -> vue Component 从入门到放弃（二）

摘要：我们可以根据模块类型扩展名来自动绑定需要的。当需要加载的文件匹配的正则时，就会调用后面的对文件进行处理，这正是强大的原因。这篇就这样吧，感觉进度有点慢从入门到放弃四从入门到放弃一从入门到放弃三源代码 Foreword 上一篇简单介绍了webpack的打包功能，应该说是比较无意义的打包，对于开发人员来说，这种效率是非常低的。所以我们来点升华。 First Step 我们给第一篇例子中加个...

xiaochao 2019-08-01 16:23 评论0 收藏0