webpack安装与使用
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安装与使用的更多相关文章
- 【JavaScript】 Webpack安装及文件打包
背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...
- webpack安装配置使用教程详解
webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...
- webpack安装配置
webpack安装 1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js 2.全局安装webpack,打开cmd输入npm install webpack - ...
- 前端自动化构建工具webpack （一）之webpack安装 和 设置webpack.confi.js
目的: 模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...
- webpackt入门1：webpack介绍&webpack安装&使用webpack打包
本篇博客不是原创,简书的zhangwang写的,原文太长,我这里只是提取了一部分. 原文地址:入门webpack,看这篇就够了 一.Webpack解决了什么问题 问题1.JavaScript这个脚本化 ...
- webpack安装整理
早上有点时间大概安装一下webpack,操作一下顺便把步骤记一下,乱乱的,还是记录一下吧! webpack安装步骤:1. 2. 3.一直回车,出现如下图: 4.创建src和dist文件 5.需要在np ...
- webpack前端构建工具学习总结（一）之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
- 1、webpack安装
1.局部安装: npm i -D (npm install --save-dev的简写) 安装指定版本:npm i -D webpack @version 安装最新版:npm i -D webpack ...
- Webpack安装配置及打包详细过程
引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...
- webpack 安装vue（两种代码模式compiler 和runtime）
使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...
随机推荐
- 二十一、如何导入svg图片
svg就相当于字体,如何将生成的svg导入到自己的项目中去呢? 1.将类似下面的文件放入自己的项目中: 2.生成的svg中有一个style.css文件,将里面的内容拷贝到你的css中,然后更改上图的路 ...
- lua的面向对象实现
百度搜索一下,给出出的解决方案和学习帖子很多,可是我还是有很多的问题! (1)什么是面向对象? (2)lua中怎么实现面向对象? (3)什么样的实现既简单又能完成我的功能? (4)一定要按照c++的方 ...
- python全栈学习笔记（三）网络基础之网络设备及架构介绍
- linux shell每天一阅 -- 安装nginx以及apache
当然这个博客原代码是转载大神的... 自动安装Nginx脚本,采用case方式,选择方式,也可以根据实际需求改成自己想要的脚本mynginx.sh #!/bin/sh ###nginx install ...
- GO语言（四）线程通信
package main import "fmt" func fibon(c,quit chan int) { x,y := , for { select { case c < ...
- 支持FreeMarker需要哪些JAR包?
FreeMarker所需的全部jar包,Jar包:struts2-core-2.0.11.2.jar,xwork-2.0.5.jar,ognl-2.6.11.jar,freemarker-2.3.8. ...
- 手把手带你理解style
在写代码的时候,经常遇到自定义的style,有的用来设置属性,有的用来设置主题,搞的自己云里雾里,因此在心底暗暗发誓,等到空闲的时候,一定好好学学android中的style的究竟是个什么东西,到底有 ...
- bzoj2000 [Hnoi2010]stone 取石头游戏
Description A 公司正在举办一个智力双人游戏比赛----取石子游戏,游戏的获胜者将会获得 A 公司提供的丰厚奖金,因此吸引了来自全国各地的许多聪明的选手前来参加比赛. 与经典的取石子游戏相 ...
- 14、SpringBoot-CRUD错误处理机制（1）
一.springboot默认的处理机制 1.浏览器返回一个错误的页面 默认处理错误:返回一个错误的页面: 包括错误类型.时间...... 2.其他客户端访问 默认响应一个json数据 原理: 错误 ...
- ASP.NET Web API编程——使用Odata
路由配置 routePrefix路由前缀,必须含有Odata字符串,否则路由不到Odata控制器. V1表示版本,可以使用这种方式进行版本控制,也可以使用其他方式. config.Count().Fi ...