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 ...
随机推荐
- 简单使用mybatis(idea中使用)
首先创建一个maven项目 第一步:在pom.xml中添加依赖 <dependencies> <!--mybatis--> <dependency> <gro ...
- CUDA Texture纹理存储器 示例程序
原文链接 /* * Copyright 徐洪志(西北农林科技大学.信息工程学院). All rights reserved. * Data: 2012-4-20 */ // // 此程序是演示了1D和 ...
- input的placeholder的颜色、字号、边距设置
#scbar_txt::-webkit-input-placeholder { /* WebKit browsers */ text-indent: 10px; font-size:16px; ...
- ios核心动画(基础动画)
一.简单介绍 CAPropertyAnimation的子类 属性解析: fromValue:keyPath相应属性的初始值 toValue:keyPath相应属性的结束值 随着动画的进行,在长度为du ...
- lintcode_69_二叉树的层次遍历
二叉树的层次遍历 描述 笔记 数据 评测 给出一棵二叉树,返回其节点值的层次遍历(逐层从左往右访问) 您在真实的面试中是否遇到过这个题? Yes 哪家公司问你的这个题? LinkedIn Airb ...
- mongodb多个查询语句
db.getCollection('costitems').find({"created":{"$gte":ISODate("2019-01-02T0 ...
- IE hack 和手机尺寸
来自为知笔记(Wiz)
- 大数据学习（一） | 初识 Hadoop
作者: seriouszyx 首发地址:https://seriouszyx.top/ 代码均可在 Github 上找到(求Star) 最近想要了解一些前沿技术,不能一门心思眼中只有 web,因为我目 ...
- uplift model学习笔记
一.解决的问题: 通常的 Propensity Model 和 Response Model 只是给目标用户打了个分,并没有确保模型的结果可以使得活动的提升最大化:它没有告诉市场营销人员,哪个用户最有 ...
- JAVA / MySql 编程——第五章 事务、视图、索引、备份和恢复
1.事务(Transaction): 事务是将一系列数据操作绑成一个整体进行统一管理. 如果一事务执行成功,则咋子该事务中进行的所有数据更改均会提交,称为数据库中的永久成部分. 如果事务执行是遇到错误 ...