webpack： JavaScript 应用程序的静态模块打包器

安装webpack前需要搭建node环境：

　　1. 安装node.js(https://nodejs.org/en/), 安装完后会自动生成 npm 包管理器

　　2. 测试node环境 运行命令 node -v  ,  npm -v

然后开始安装webpack

　　1. 全局安装 npm install webpack -g , npm install webpack-cli -g

　　2. 创建项目目录

　　　　mkdir webpack-demo && cd webpack-demo

　　3. 初始化 npm:

　　　　npm init -y 　　//会自动创建package.json文件

　　4. 搭建本地服务器

　　　　npm install webpack-dev-server --save-dev

　　5. 在package.json文件中编写脚本

　　　　"build" : "webpack",

　　　　"start": "webpack-dev-server --open"

　　6. 调整目录结构

　　　　webpack-demo下新建文件夹dist和src, dist存放打包后的文件， src是源文件

　　　　webpack-demo/dist ,

　　　　webpack-demo/index.html ,

　　　　webpack-demo/webpack.config.js

　　　　webpack-demo/src/main.js

　　7. 文件内容：

main.js:

　　document.write("str");

index.html:

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>webpack demo</title>

</head>

<body>

<div>webpack</div>

<script type="text/javascript" src="bundle.js"></script>

</body>

</html>

webpack.config.js:

const path = require('path');

module.exports = {

  entry: './src/main.js',  //指定入口文件

  output: {　　　　　　　　　　　　

    filename: 'bundle.js',　　//项目编译后的文件名和路径

    path: __dirname+ '/dist/'

  }

};

　　8. 执行 npm run build 生成编译好的文件，webpack-demo/dist/bundle.js

　　　 执行 npm start 开启服务器端口，浏览器打开http://localhost:8080/调试页面，ctrl+c 关闭端口

　　9. 引入css文件，因为webpack只能识别js文件，所以需要安装依赖

　　　　npm install style-loader css-loader --save　

　　　　创建文件 webpack-demo/src/style/a.css

　　　　在main.js中引入a.css ：require("./style/a.css");

　　　　webpack.config.js文件配置：

 module:{

  	rules: [

  		{

  		　　test: /\.css$/,

  		　　use: ['style-loader','css-loader']

  		}

  	]

  }

　　然后在a.css文件写入样式，可以正常展示

webpack安装与使用的更多相关文章

  1. 【JavaScript】 Webpack安装及文件打包

    背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...

  2. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  3. webpack安装配置

    webpack安装 1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js 2.全局安装webpack,打开cmd输入npm install webpack - ...

  4. 前端自动化构建工具webpack （一）之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...

  5. webpackt入门1：webpack介绍&webpack安装&使用webpack打包

    本篇博客不是原创,简书的zhangwang写的,原文太长,我这里只是提取了一部分. 原文地址:入门webpack,看这篇就够了 一.Webpack解决了什么问题 问题1.JavaScript这个脚本化 ...

  6. webpack安装整理

    早上有点时间大概安装一下webpack,操作一下顺便把步骤记一下,乱乱的,还是记录一下吧! webpack安装步骤:1. 2. 3.一直回车,出现如下图: 4.创建src和dist文件 5.需要在np ...

  7. webpack前端构建工具学习总结（一）之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  8. 1、webpack安装

    1.局部安装: npm i -D (npm install --save-dev的简写) 安装指定版本:npm i -D webpack @version 安装最新版:npm i -D webpack ...

  9. Webpack安装配置及打包详细过程

    引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...

  10. webpack 安装vue（两种代码模式compiler 和runtime）

    使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...

随机推荐

  1. 万网知您所需，“域”众不同--.link/.love/.help等一大波新顶级域来袭！

    万网在新顶级域市场再次发力,一大波域名界的小鲜肉新鲜上线,价格优惠,限时低至9元起,更有丰富的可注册资源. 一下,即刻世界,用记录生活,用观看世界, 用和做最好的! 新上线的个性化新顶级域价格如下: ...

  2. MXNet 分布式环境部署

    MXNet 分布式环境部署 1. MxNet 分布式介绍 先忽略吧, 回头在填上去 2. 分布式部署方法 假设有两台主机ip地址分别是xxx.xxx.xxx.114 和 xxx.xxx.xxx.111 ...

  3. python RabbitMQ广播

    消息公平分发 如果Rabbit只管按顺序把消息发到各个消费者身上,不考虑消费者负载的话,很可能出现,一个机器配置不高的消费者那里堆积了很多消息处理不完,同时配置高的消费者却一直很轻松.为解决此问题,可 ...

  4. 【转】ubunt 安装 yum出现 ubuntu 解决“无法获得锁 /var/lib/dpkg/lock -open （11：资源暂时不可用）”的方法

    今天本来是用xshell 链接本地的linux的,然而链接的时候没有主动弹出输入 用户名和密码的对话框,google搜了下,遇到了上面的问题. 解决办法如下:1.终端输入 ps  aux ,列出进程. ...

  5. SSIS ->> Environment Variables

    SQL Server Integration Services(SSIS) 在2012版本引入了Environment Variables这个新特性.它允许我们为一个环境创建出一套变量用于为项目内的包 ...

  6. pt-kill

    pt-kill作用主要是用来杀掉MySQL的链接,在查杀进程的时候,它从show processlist 中获取满足条件的连接然后进行kill,也可以从从包含show processlist的文件中读 ...

  7. Hyper-V迁移---委派

    在Hyper-V管理器中-实时迁移,选择“使用kerberos",如图1所示 在AD中,找到Hyper-V宿主,分别设置委派,如图2所示    图1               图2

  8. RabbitMQ 启动

    1.使用Rabbit MQ 管理插件,可以更好的可视化方式查看Rabbit MQ 服务器实例的状态,你可以在命令行中使用下面的命令激活: C:\Program Files\RabbitMQ Serve ...

  9. Java字符串工具类

    import java.io.ByteArrayOutputStream;import java.io.UnsupportedEncodingException;import java.lang.re ...

  10. 【java基础】随手写的一个日期计算，新手可以看看

    随手写的一个例子, 只是练习下自己的代码布局以及思路.. 1. 先写下简单的测试 2. 根据常用的不用修改的变量抽取出来, 作为常量(常量的命名可能有点不规范,谅解~) 3. 方法的作用不一样, 抽取 ...