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 ...
随机推荐
- 第28章 LTDC—液晶显示中英文—零死角玩转STM32-F429系列
第28章 LTDC—液晶显示中英文 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/f ...
- powerdesigner15 反向工程
- background和background-image一点小区别
如果使用background-image属性,则no-repeat不能使用,因为其对background-image不起作用. 可以使用background属性,再设置no-repeat.
- 1、webpack安装
1.局部安装: npm i -D (npm install --save-dev的简写) 安装指定版本:npm i -D webpack @version 安装最新版:npm i -D webpack ...
- C#封装cef图片title不显示
遇到Web项目在浏览器调试时tip能正常显示,在cef环境下居然没有提示.根据网上的的资料添加app.manifest文件. 并且放开这一段代码.重新编译后能够显示出tip.
- Eloquent： 修改器
感觉好长时间没写东西了,一方面主要是自己的角色发生了变化,每天要面对各种各样的事情和突发事件,不能再有一个完整的长时间让自己静下来写代码,或者写文章. 另一方面现在公司技术栈不再停留在只有 Larav ...
- Ansible学习 Playbooks_1
Playbooks是Ansible中执行较复杂任务的一种的方式,Playbook由1个或多个play组成,语法格式是YAML,下面以一个简单的任务为例,开始我们的Playbook学习: 任务描述: 1 ...
- py2exe安装使用
一.简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具,这样,你就可以不用装python而在windows系统上运行这个可执行程序. py2e ...
- redis源代码结构解析
看了黄建宏老师的<Redis设计与实现>,对redis的部分实现有了一个简明的认识: 之前面试的时候被问到了这部分的内容,没有关注,好在还有时间,就把Redis的源码看了一遍. Redis ...
- Linux入门篇（五）——Shell（一）
这一系列的Linux入门都是本人在<鸟哥的Linux私房菜>的基础上总结的基本内容,主要是记录下自己的学习过程,也方便大家简要的了解 Linux Distribution是Ubuntu而不 ...