webpack 基本配置

皮卡皮卡皮 等级 869 0 0
标签: webpack

概念

本 质上,webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler)

当 webpack 处理应用程序时,它会递归地构建一个 依 赖关系图(dependency graph)_,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 _bundle

安装

确保安装了nodejs

项目文件环境

cd mypack
// 进入你的项目目录 mypack目录可以随意自己建立

npm init  
//  初始化项目文件夹 会创建一个package.js

本地安装

npm install --save-dev webpack
npm install --save-dev webpack-cli

对于大多数项目,我们建议本地安装

准备文件

-- dist 文件生成目录
---- index.html 

-- index.js 主入口文件
-- header.js 需要被index引入的文件
#  index.html
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>第一个webpack页面</title>
</head>
<body>
 <script src="main.js"></script>   
</body>
</html>
<!--打包好的js名称默认是main.js-->


#  index.js
import {header} from './header.js'
document.body.append(header);


#  header.js
var header =document.createElement("div");
header.innerHTML="你好webpack from header";
export {header};

执行命令 打开index.html

npx webpack index.js
// 在你的项目目录执行 这里的名称是 mypack

然后打开你的dist/index.html 查看网页文件
同时你会发现在 dist目录多个main.js这个打包生成好的js文件

使用配置文件

在项目目录 新建一个webpack.config.js webpack默认配置文件

const path = require('path')
// 引入node的 path路径模块

module.exports={
    entry:'./index.js',
    // 指定文件的入口
    output:{
        filename:'main.js',
        // 定义文件名
        path:path.resolve(__dirname,'dist')
        // 定义文件夹 
        // __dirname获取当前目录
        // path.resolve 方法将路径或路径片段的序列解析为绝对路径
    }
    // 指定打包好的出口
}
// module.export node中导出模块的意思

# 以下为纯净版本
const path = require('path')
module.exports={
    entry:'./index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist',
    }
}

执行命令npx webpack实现打包

配置 scripts

找到package.js 配置scripts

"scripts":{
    start:  "webpack"
}

这样我们就可以执行

npm run start
// yarn start

配置模式

const path = require('path')
module.exports={
    mode:'development', //开发模式
    // mode:'production',// 产品模式
    entry:'./index.js',
    output:{
        filename:'main.js',
        path:path.resolve(__dirname,'dist')

产品模式打包的大小要比生产模式要小的多。

 "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

核 心概念

  • 入口(entry)
  • 输出(output)
收藏
评论区

相关推荐

用 webpack 4.0 撸单页/多页脚手架 (jquery, react, vue, typescript)
1.导语 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首先来简单介绍一下webpack:现代 JavaScr
Webpack 5.0 初体验
<p style"textalign: center;"<img class"rich_pages" dataratio"0.66640625" datas"300,640" src"https://usergoldcdn.xitu.io/2020/4/12/1716ebf44174dac8?w1080&h720&fjpeg&s
Vue进阶(幺柒柒):Vue应用Sass、Scss、Less和Stylus
Vue项目中使用预处理器,可以有效减少css代码量, 推荐使用Sass、Scss、Less预处理器。可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选择,内置的 webpack 仍然会被预配置为可以完成所有的处理,也可以手动安装相应的 webpack loader: Sassnpm
React.js中JSX的原理与关键实现
在开始开发之前,我们需要创建一个空项目文件夹。安装1. 初始化 npm init y 2.安装webpack相关依赖npm install webpack webpackcli D 3. 安装babelloader相关依赖 npm install babelloader @babel/core @babel/presetenv D 4.
webpack 基本配置
概念本 质上,webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) 。当 webpack处理应用程序时,它会递归地构建一个 依 赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle 。 安装确保安装了nodejs 项目文件环境cd
vscode+vue简单安装教程
1、安装vscode、node.js。2、打开vscode终端,全局安装vuecli:npm install g vuecli用于构建项目。3、继续安装webpack(打包工具):npm install g webpack。4、安装完成创建一个文件夹用于存放项目,比如myvue,cd到该文件夹,使用项目创建命令:vue init webpack myvue。
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
5、开发时热加载
我们开发代码的时候,如果没有热加载,每修改一次代码,都需要重新wepack打包才能生效。所以热加载在开发中是很有用的功能。 **1、安装热加载需要的包。** ================ 热加载需要用到一个包。 npm install --save-dev webpack-dev-server **2、启动webpack-dev-server。*
vite2 引入 vectorize
这个库在webpack中是正常的, 但是在vite2项目中无法使用也不报错, 只是结果总是空....看了下是个老项目了, 依赖的也都是好几年没更新的库... 看来webpack在兼容性方面还是要强不少的     尝试使用parcel打包后使用, 不太行... 用webpack打包后使用.... 也不行... 有时间再研究研究, 看看能不能写个类似的.
18个常用 webpack插件,总会有适合你的!
![](https://oscimg.oschina.net/oscnet/71317da0c57a8e8cf5011c00e302a914609.jpg) 来源 | https://github.com/Michael-lzg/my--article/blob/master/webpack/ **Plugin** ---------- 何为插
20k以上面试必问,Webpack原理和优化
我身边很多朋友都觉得 Webpack 不重要,认为只要团队里有人会就可以,而那个人不需要是自己。 那么我就给你一个必须学它的理由: **Webpack 原理和优化** ****工资20k以上的面试必问**** 如果你想拿到高薪,Webpack就是你绕不过去的一道门槛。 而即便不提面试,对于 每一个前端工程师来说
React的使用方法(脚手架的方法)
**使用react加脚手架创建一个项目:** * npm install create-react-app -g * create-react-app myapp * cd myapp * yarn start **npx : 帮助我们更方便的找到本地安装的命令** * .\\node\_mo
TypeScript 文件引入 Html (ts import html webpack)
我们的目标是把html引入ts文件,webpack打包时就能把html打进js文件,减少文件加载啦 1 安装 text-loader npm install text-loader --save-dev 2 webpack 配置里新增 text-loader 为文本加载器 module: { rules: [
Vue+Webpack配置css
  使用Vue+Webpack搭建工程时,在webpack.config.js中的module的rules里针对各种文件配置加载工具。在针对css文件配置时遇到一个问题:打包构建时报错——Module build failed: Unknown word。   配置内容如下: {   test: /\.css$/,   use:
storybook配置之基本配置和webpack配置
#默认配置 Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其与vue cli的webpack配置非常相似 开始学习Storybook配置 学习内容(Table of Contents) - Babel ES2016+