webpack 基础
1.安装： npm install --save-dev webpack npm install --save-dev webpack@<version>
如果是webpack 4+ ,安装 CLI npm install --save-dev webpack-cli 。
2.创建demo
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
3.调整安装包为私有，移除main接口，需在package.json里面修改，增加private，去掉main。
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "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"
},
"dependencies": {}
}
4.创建一个 bundle 文件，在该文件夹下新建src/index.js, dist/index.html
然后安装lodash npm install --save lodash ,新建文件内容如下，命令行输入npx webpack。在浏览器中打开 index.html，页面会出现在index.js加的内容。总结 ：执行 npx webpack，会将我们的脚本作为入口起点，然后 输出 为 main.js。这个时候查看dist文件夹，会看到文件多出了一个main.js
注：安装一个要打包到生产环境的安装包时，使用 npm install --save，安装一个用于开发环境的安装包（例如，linter, 测试库等），应该使用 npm install --save-dev。
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
+ <script src="main.js"></script>
</body>
</html>
index.js
+ import _ from 'lodash';
+
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
5.使用配置文件，在该文件夹下新建webpack.config.js，配置如下，再次执行构建：npx webpack。
如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。可以使用 --config 传递任何名称的配置文件，这对于需要拆分成多个文件的复杂配置是非常有用。比如npx webpack --config webpack.config.js。
比起 CLI 这种简单直接的使用方式，配置文件具有更多的灵活性。我们可以通过配置方式指定 loader 规则(loader rules)、插件(plugins)、解析选项(resolve options)，以及许多其他增强功能。
这个时候dist文件就会多一个bundle.js。
const path = require('path');
module.exports = {
entry: './src/index.js',//入口文件
output: {//输出文件
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
6.NPM 脚本。设置快捷方式，在package.json中scripts里面添加。
{
"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"
}
}
现在可以使用 npm run build 命令，来替代npx 命令。
通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors。
7.加载 CSS。
为了从 JavaScript 模块中 import 一个 CSS 文件，需要在 module 配置中 安装并添加 style-loader 和 css-loader： npm install --save-dev style-loader css-loader。可以在依赖于此样式的文件中 import './xx.css'。现在，当该模块运行时，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中。
在webpack.config.js中增加配置如下。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};
8.加载图片和加载字体，file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括字体，这里举例file-loader：npm install --save-dev file-loader
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
+ {
+ test: /\.(png|svg|jpg|gif)$/,
+ use: [
+ 'file-loader'
+ ]
+ },
+ {
+ test: /\.(woff|woff2|eot|ttf|otf)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}
};
9.加载数据。
可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。要导入 CSV、TSV 和 XML，可以使用 csv-loader 和 xml-loader：npm install --save-dev csv-loader xml-loader。
+ {
+ test: /\.(csv|tsv)$/,
+ use: [
+ 'csv-loader'
+ ]
+ },
+ {
+ test: /\.xml$/,
+ use: [
+ 'xml-loader'
+ ]
+ }
webpack 基础的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- 搭建webpack基础配置
搭建webpack基础步骤: 1.去官方网站下载node.js(根据自己电脑的系统类型选择) 2.安装node.js完成后打开cmd命令提示符: 出现版本号证明安装成功 3.cd到工程目录下 npm ...
- nodejs+gulp+webpack基础知识
nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...
- Webpack基础学习
Webpack基础学习:https://segmentfault.com/a/1190000008853009
- 学习webpack基础笔记01
学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...
- 【webpack】---模块打包机webpack基础使用---【巷子】
001.什么是webpack? 作用有哪些? WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Ty ...
- Webpack -- 基础篇
篇仅演示 webpack 的基础搭建,为入门和走通基本流程而写.仅 window 系统. 1. 安装一些东西 安装 nodeJS,下载链接.然后检查安装是否完成. 系统“开始”和“R”键同时按住,桌面 ...
- webpack基础知识点
webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler). 入口(Entry) webpack 将创建所有应用程序的依赖关系图表(dependency ...
- webpack基础知识
一.基础 1 安装 npm i -g webpack webpack-cli // 推荐安装至本地 npm i -D webpack webpack-cli 2 webpck基础使用 2.1 webp ...
随机推荐
- PMVS论文随笔（1）
博客园排版系统真的比较挫,可以访问我的github.io阅读 关于Unit的概念 在pmvs的源代码中,有一个函数是getUnit ,其函数如下(在PMVS2的windows版本代码,optim.cc ...
- Strut2 的 Action获取JSP 页面参数的方法
struts2 Action获取表单传值1.通过属性驱动式JSP:<form action="sys/login.action" method="post" ...
- 出门旅行(tour)
出门旅行(tour) 题目描述: 在神奇的 oi 国度,有 n 个城市 m 条双向道路,每条道路连接了两个不同的城市.寒假到了,小 S 决定出门旅游一趟.因为以往跟团旅游多了,这次小 S 决定自驾游. ...
- 【赛时总结】◇赛时·V◇ Codeforces Round #486 Div3
◇赛时·V◇ Codeforces Round #486 Div3 又是一场历史悠久的比赛,老师拉着我回来考古了……为了不抢了后面一些同学的排名,我没有做A题 ◆ 题目&解析 [B题]Subs ...
- mysql 自增主键为什么不是连续的？
由于自增主键可以让主键索引尽量地保持递增顺序插入,避免了页分裂,因此索引更紧凑 MyISAM 引擎的自增值保存在数据文件中 nnoDB 引擎的自增值,其实是保存在了内存里,并且到了 MySQL 8.0 ...
- js动画之无缝滚动
效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 使用IDEA将本地项目上传到GitHub
00.首先保证git和github能够使用ssh连接. 01.在GitHub上新建仓库 需要注意的是不要勾选Initialize this repository with a README. 02.在 ...
- 银行卡验证API
一.银联开放平台 https://open.unionpay.com/tjweb/api/detail?apiSvcId=21 应用场景 综合数据服务平台是银联为接入商户提供的综合数据认证服务接口,目 ...
- php学习【1】
1:输出语句 <?php echo "hellow world"; print "hellow world"; print_r ("helow ...
- Allowed memory size of 134217728 bytes exhausted (tried to allocate 2 bytes)
出现 Allowed memory size of 134217728 bytes exhausted (tried to allocate 2 bytes)时在php.ini文件中配置 memor ...