webpack基本使用教程
安装
本地安装
npm install --save-dev webpack
npm install --save-dev webpack-cli //4.x以上版本,用于cli命令全局安装
npm install -g webpack
npm install -g webpack-cli初始化项目
npm init -y //自动生成一个package.json文件
npm install webpack webpack-cli --save-dev基本目录结构
webpack配置表
按项目结构编写代码
//package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
//webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
//index.html
<!doctype html>
<html>
<head>
<title>demo</title>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
//index.js
function component() {
var element = document.createElement('div');
var node = document.createTextNode("hello,webpack!");
element.appendChild(node);
return element;
}
document.body.appendChild(component());下载安装包
//production模式
npm install --save [+安装包名称]
//development模式
npm install --save-dev运行项目
以项目脚本为入口起点,输出main.js
npx webpack
添加npm脚本到package.json设置一个快捷方式运行本地的webpack
//package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack" //新增
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}loader
加载css文件
react默认不支持css文件,所以需要进行转码.
// webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}加载图片
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
} 加载字体
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
}加载数据
module: {
rules: [
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
]
}全局资源
通过这些方式加载资源,更加直观和可移植
插件的使用
比如使用一个HtmlWebpackPlugin
安装
npm install --save-dev html-webpack-plugin使用
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Output Management'
+ })
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};source map
准确追踪错误和警告
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
+ devtool: 'source-map',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};开发工具
帮助你在代码发生变化后自动编译代码
有webpack's Watch Mode,webpack-dev-server,webpack-dev-middleware 三种.开发常用webpack-dev-server
安装
npm install --save-dev webpack-dev-server使用
//webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
+ devServer: {
+ contentBase: './dist'
+ },
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};webpack基本使用教程的更多相关文章
- WebPack 简明学习教程
WebPack 简明学习教程 字数1291 阅读22812 评论11 喜欢35 WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack. ...
- webpack 的使用教程
webpack 的使用教程 今天接触webpack,就着官网上的教程一步一步的玩,把自己的理解总结以便和大家交流 webpack的主要特点 1. 可以把js,css,image,甚至文本当成模块来处理 ...
- webpack快速掌握教程
转载http://yijiebuyi.com/blog/46fb97b11fb8f4055e0b04d1cecb1f69.html #为什么用webpack 如果我们 前端 javascript 能像 ...
- Webpack新手入门教程(学习笔记)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...
- Webpack简易入门教程
<!-- 其实网上关于webpack的教程已经很多了,但是本人在学习过程中发现很多教程有错误,或者写的很不全面,结果做的过程出现各种各样的问题,对新手不但不友好还会让人浪费很多不必要的时间.所以 ...
- webpack轻松入门教程
webpack之傻瓜式教程及前端自动化入门 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpa ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- webpack CommonsChunkPlugin详细教程
1.demo结构: 2.package.json配置: { "name": "webpack-simple-demo", "version" ...
- webpack入门操作教程
1. webpack介绍 在传统的项目中,一个html文件可能会加载多个js.css文件,如果多人协同开发的话,就会出现全局变量被污染.文件直接的依赖问题 而webpack打包工具,会先分析入口文件的 ...
随机推荐
- Maven环境下面多项目之间的引用
如图: https://github.com/sdl/odata-example sdl OData例子包含了4个项目,下载到本地后编译.发现只有model项目是可以编译过去了.其他几个暂时编译不过 ...
- 项目Alpha冲刺 6
作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 介绍第6天冲刺的项目进展.问题困难和心得体会 1.团队信息 队名:火鸡堂 队 ...
- 2019.4.18 HTML + CSS相关整理
目录 标签 块标签 行标签 行块转化 嵌套规则 css引入方式 行间样式 内部引入 外部引入 选择器 基础选择器 组合选择器 盒模型 css样式 字体属性 设置字体的大小 设置字体的粗细 设置字体的风 ...
- Win10远程连接，出现身份验证错误。远程计算机要求的函数不受支持 这可能是由于CredSSP加密Oracle修正 。
问题: 升级至win10 最新版本10.0.17134,安装最新补丁后无法远程win server 2016服务器,报错信息如下: 出现身份验证错误,要求的函数不正确,这可能是由于CredSSP加密O ...
- vue-tree 组织架构图/树形图自动生成(含添加、删除、修改)
项目中用代码生成组织架构图 有新增,编辑,删除的功能 生成树形图的组件git-hub地址: https://github.com/tower1229/Vue-Tree-Char ...
- goledengate重新投递和目标端跳过过事务
日常在goledengate的维护中,最大的问题莫过于进程ABENDING.在我的维护生涯中,主要的有两个原因,第一个是网络中断造成的造成的文件损坏,一个是大事务(相关操作人员在进行操作的时候事务过大 ...
- mysql 01
CREATE TABLE student(sid INT,sname VARCHAR(10),ssex CHAR(2) )/*插入数据*/INSERT INTO student VALUES(1,'袁 ...
- 那些H5用到的技术（3）——屏幕场景滑动
前言Swiper.js一些需要我们手动设置的参数排版元素需要设置position:absolute绝对元素定位swiperAnimate方法的使用动画播放完成之后的监听上滑提示屏幕适配的问题Anima ...
- (转)Http状态码301和302概念简单区别及企业应用案例
Http状态码301和302的区别及企业应用案例 原文:http://blog.51cto.com/oldboy/1774260 1.什么是301重定向? 301重定向/跳转一般,表示本网页永久性转移 ...
- mysql 必知必会总结
以前 mysql 用的不是很多, 2 天看了一遍 mysql 必知必会又复习了一下基础. 200 页的书,很快就能看完, 大部分知识比较基础, 但还是了解了一些以前不知道的知识点.自己做一个备份,随 ...