webpack起步

最新推荐文章于 2023-06-14 12:08:12 发布
最新推荐文章于 2023-06-14 12:08:12 发布
阅读量354 收藏
点赞数
分类专栏： NodeJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_23077999/article/details/92815951
版权

1.首先我们创建一个目录，初始化 npm，然后在本地安装webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

2.目录结构:

index.html

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
  </head>
  <body>
    <!-- <script src="./src/index.js"></script> -->
    <script src="bundle.js"></script>
  </body>
</html>

 

webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

index.js

import * as _ from 'lodash'

function component() {
  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

注意：1.出现Module not found: Error: Cannot resolve module '@types/lodash'问题需要安装lodash

npm install --save-dev @types/lodash
npm install --save lodash

然后才能引用lodash

import * as _ from 'lodash';
 _.join(['Hello', 'webpack'], ' '); // or whatever

2.全局安装 webpack-cli 及webpack后执行webpack命令发现警告ERROR in Entry module not found:SyntaxError： E:\VSCode Workspace\webpack-demo\package.json...

执行一下npm run dev 或者 npm run build即可解决

66666666668888888888
关注
专栏目录
webpack起步 - 打包JS文件
YinXiaobo
12-03 547
webpack起步 - 打包JS文件 1. 使用 NPM 安装 webpack 要安装最新版本或者特定版本，请运行一下命令： npm install webpack --save-dev npm install webpack@&amp;amp;amp;lt;version&amp;amp;amp;gt; --save-dev 2. 在目录下新建 app.js 作为入口文件，新建 sum.js ，index.html app.js :...
《Vue入门到精通系列之三》--- webpack详解
最新发布
2301_82244343的博客
04-20 1212
从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具模块和打包package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。首先，会寻找本地的node_modules/.bin路径中对应的命令。如果没有找到，会去全局的环境变量中寻找。如何执行我们的build指令呢？1.6.css-loader的使用loader是webpack中一个非常核心的概念。webpack用来做什么呢？
webpack-起步
yuxiaoc的博客
11-04 257
这个系列将记录webpack5 的学习。 常规目录结构： webpack-demo |- package.json |- webpack.config.js |- /dist |- index.html |- /src |- index.js 作用：静态打包工具，编译javascript 等 安装： npm init npm install webpack webpack-cli -D 新建webpack.config.js const path = re
webpack 起步
马金波
08-28 265
概念 官方解释： 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 自我理解： webpack 用于管理资源（css，js，图标，字体等），解决依赖...
Webpack起步项目：从安装到模块搭建
资源摘要信息:"my-webpack-starting-project是一个开始的Webpack项目，本文将介绍如何开始使用这个项目。首先，需要安装或更新Node.js环境，推荐使用nvm管理Node.js版本，以便在同一台机器上安装和使用不同版本的...
react-typescript-webpack-starter
04-01
《React + TypeScript + Webpack 起步指南》 在当今的前端开发领域，React、TypeScript 和 Webpack 的组合已经成为构建复杂Web应用的主流选择。这个名为 "react-typescript-webpack-starter" 的项目，正是为了帮助...
webpack中文文档笔记——起步
ass_ace
12-10 526
private ：true 确保我们安装包是私有的(private) 移除 main ：“index.js” 可以防止意外发布你的代码 2.webpack 的项目结构中的src文件和打包完的dist文件夹的区别： src “源”代码是用于书写和编辑的代码 dist 是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载 npm install --save ...
webpack 简单构建起步
zhiying_08的博客
05-05 220
前提：确保node.js存在且是最新版本第一步：创建一个空文件mkdir webpack &amp;&amp; cd webpack第二步：初始化npm  npm init第三步：本地安装webpack 和webpack-clinpm install webpack --save-dev npm webpack-cli --save-dev第四步：创建目录结构和文件内容dist/index.htm...
webpack分离css单独打包的方法
08-27
主要介绍了webpack分离css单独打包的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack（三）：webpack起步
wangdongm123的博客
01-16 251
创建如下文件和文件夹： dist文件夹：用于存放之后打包的文件 src文件：用于存放我们写的源文件 3.1commonJS模块化导出 这是基于nodejs使用的导出方式，没有nodejs的支撑是无法使用的！ module.exports= {} 导出 3.2commonJS模块化导入 require导入 3.3js文件的打包   现在的js文件中使用了模块化的方式进行开发，他们可以直接使用吗...
2、webpack 起步
gosenkle的专栏
05-21 224
1、创建目录初始化npm，并安装webpack和webpack-cli mkdir webpack-demo && cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev 2、工程目录更如下 webpack-demo |- webpack.config.js // webpack配置...
简单易懂的webpack入门
秋扬诺布的笔记本
03-30 1848
简单易懂的webpack入门本文比较初级且详细易懂适合没怎么接触过Webpack，而又对webpack感兴趣的人参考； 最近这些天有几个朋友在刚开始使用webpack中遇到问题，所以想写一篇自己的立即，因为水平有限但是尽力让本文一目了然；nodejs与npmwebpack webpack安装 webpack打包 loader——模块加载器 webpack配置说明 webpack.config.js
实战 es6_webpack 5 实战 - 01.起步
weixin_42524610的博客
12-19 155
本系列文章主要 由浅入深 介绍如利用 webpack 5、babel、sass、postcss、webapck-chain 等模块、库实现生产项目构建的实战 目录webpack 5 实战 01.起步 - webpack5 构建如果 从0到1 实现 js构建webpack 5 实战 02.特征 - 基于 webpack 5 新特征实现编译webpack 5 实战 03.拓展 - 基于现有的体系 ...
webpack学习从基础学起
kokunka的博客
04-23 2015
webpack学习从基础学起一、webpack的起步二、webpack的配置三、webpack的loader3.1 css-loader的使用3.2 less-loader的使用3.3 url-loader的使用3.4 file-loader的使用
【webpack5】提取css成单独文件
sylbiubiubiu的博客
08-31 877
webpack5 提取css成单独文件
webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理
jieyucx的博客
06-14 5440
兼容性在以前一直是个比较令大家头疼的事情，尤其是那时候还得兼容IE，webpack肯定是考虑到了这些，实现样式兼容性，我们需要借助几个loader。这就是本章的内容拉，webpack处理css文件打包到单独的文件、压缩、以及兼容性处理。在以前的章节中，我们配置过的生产环境的打包文件，webpack.prod.js。我们去控制台将往速调慢，然后运行打包好的index.html文件。用法很简单，引入，然后在plugin配置对象中添加就可以了。如图，css文件已经被处理成了单独的文件了。文件加载时，会创建一个。
《webpack5 实战二》之css打包
星宇大前端
04-09 351
前言：项目一直在用webpack 打包，也系统的跟着B站的视频教程去学过，但是总是觉得差了点什么，有些配置还是不知道，决定把一些例子写下来总结下知识点，顺便学习下webpack5。 webpack实战系列专栏 webpack实战源码 webpack官网文档 webpack默认只支持打包json和js,打包css需要使用loader进行处理。   目标过程分解 目标：打包css、less、sass等样式资源 步骤： 创建js、样式和webpack配置文件 webpack 配置文件添加处理.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值