webpack教程

muddyway 发布于2019-08-22 16:58 / 684人阅读

1.安装

先装好node和npm，因为webpack是一个基于node的项目。然后

npm install -g webpack

2.建立项目

建一个文件夹，然后新建一个package.json的文件在项目根目录下

mkdir testwebpack
cd  testwebpack
npm init

2.1询问一些问题:按回车选择默认值自动生成文件

 package.json
 package name: (webpack-test)   包名(demo)
 version: (1.0.0)               版本
 description:                   描述
 entry point:                   入口程序(main.js)
 test command:                  测试指令("dev": "webpack-dev-server","build": "webpack -p")
 git repository:                node_modules
 keywords:                      关键字
 author:                        作者
 license: (ISC) MIT             MIT
 Is this ok? (yes)              yes

3.在创建webpack.config.js

module.exports = {
  entry: "./main.js",  /*你要打包的js文件*/
  output: {
    filename: "bundle.js"  /*打包后生成的文件*/
  },
   module: {
rules:[
  {
    test: /.css$/, /*引入css文件配置*/
    use: [ "style-loader", "css-loader" ]
  },
]
  },
  module: {
rules:[
  {
    test: /.(png|jpg)$/, /*引入图片文件配置*/
    use: [
      {
        loader: "url-loader",
        options: {
          limit: 8192
        }
      }
    ]
  }
]
 }
};

3.1例如我的main.js里写

    
document.write("Hello World");

require("./app.css");

var img = document.createElement("img");
img.src = require("./small.png");
document.body.appendChild(img);

3.2查看打包好后使用的JS则创建html文件

4.创建服务器

npm i -g webpack webpack-dev-server

5.安装依赖关系。

  npm install

6.打包

 npm run dev

云服务器私有云 webpack教程 webpack4教程 webpack _webpack

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

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

webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack 教程资源收集

学习的过程中收藏了这些优秀教程和的项目，希望对你有帮助。 github地址, 有不错的就更新官方文档中文指南初级教程 webpack-howto 作者：Pete Hunt Webpack 入门指迷作者：题叶　 webpack-demos 作者：ruanyf 一小时包教会 —— webpack 入门指南作者：VaJoy Larn　　 webpack 入门及实践作者：...

Backache 2019-08-21 14:05 评论0 收藏0
webpack4系列教程（十）：总结

摘要：传送门系列教程一初识系列教程二创建项目，打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境在前端开发日益复杂的今天，我们需要一个工具来帮助我们管理项目资源，打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音，我的博文只...

hqman 2019-08-26 13:29 评论0 收藏0
webpack4详细教程，从无到有搭建react脚手架（一）

摘要：是一个现代应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师切图仔，非常有必要学习。官网的文档非常的棒，中文文档也非常给力，可以媲美的文档。建议先看概念篇章，再看指南，然后看和配置总览。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师（切图仔），非常有必要学习。 showImg(https://segment...

zhkai 2019-08-23 18:35 评论0 收藏0
webpack 教科书式入门教程

摘要：教程最近刚用完又来捣鼓捣鼓，这只是个简单的新手入门教程不多说注意安装前检查的安装目录路径是否存在空格，建议安装在无空格文件夹目录下。 Webpack4.x 教程最近刚用完 gulp 又来捣鼓捣鼓 webpack ，这只是个简单的新手入门教程...不多说；注意：安装webpack前检查nodejs的安装目录路径是否存在空格( Program Files (x86) )，建议安装在无空格...

13651657101 2019-08-19 18:12 评论0 收藏0
webpack4 系列教程: 前言

摘要：课程地址全部课程地址立即进入课程源码目录截至按照知识点，目录分成了个文件夹之后还会持续更新。个人网站原文链接系列教程前言本文档已经过时，最近内容请看：https://godbmw.com/passage/76。一共16节课程和代码。谢谢支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的帮助下，开发者可以轻松地实现加密代码、多平台兼容。而最重要的...

DevWiki 2019-08-23 10:25 评论0 收藏0