从零开始学习webpack4---(更新中)

最新推荐文章于 2024-09-15 21:55:26 发布
最新推荐文章于 2024-09-15 21:55:26 发布
阅读量3.4k 收藏 1
点赞数 1
分类专栏： webpack4 文章标签： webpack4 webpack学习 webpack入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ky1in93/article/details/80585805
版权

内容取自：https://www.valentinog.com/blog/webpack-4-tutorial/

1.创建项目文件夹(windows用户需要分别执行创建，然后cd到"webpack-4-quickstart")

  1. mkdir webpack-4-quickstart && cd $_

2.初始化package.json

  1. npm init -y


3.安装webpack和webpack-cli(webpack4中webpack-cli抽离出来了，需要分别安装)

windows用户尽量全局安装

npm install webpack webpack-cli -g

并设置环境变量

  1. npm i webpack webpack-cli --save-dev
查看webpack版本：
  1. webpack -v

4.创建入口文件，配置package.json 进行打包

webpack4中默认将./src/index.js 作为入口

创建./src/index.js文件，将如下内容复制进去！

  1. console.log(`I'm a silly entry point`);

在package.json中配置脚本

  1. "scripts": {
  2. "build": "webpack"
  3. }

执行命令：

  1. npm run build

提示编译成功，并会创建./dist/main.js

5.生产和开发模式

上面执行打包命令之后虽然没有报错，但是有一个警告！


'模式'选项尚未设置。将'模式'选项设置为'开发'或'生产'以启用此环境的默认值。

修改package.json中的脚本部分：

  1. "dev": "webpack --mode development",
  2. "build": "webpack --mode production"

然后执行打包命令：

  1. npm run dev
开发模式针对速度进行了优化，只不过是提供未缩小的捆绑包。
  1. npm run build

可以实现各种优化。包括缩小，范围提升，翻树等等。

6.覆盖默认入口出口配置

  1. "scripts": {
  2. "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
  3. "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
  4. }

修改配置package.json文件，然后打包的时候会去找入口文件(./foo/src/js/index.js)，并在（./foo/main.js）输出。

7.使用babel编译ES6

现在许多都是用es6语法编写代码，webpack需要通过babel-loader 将es6以上的转为es5，以便浏览器可以解析。

要使用加载器，需要一些依赖。

  1. npm i babel-core babel-loader babel-preset-env --save-dev

然后需要创建一个文件(.babelrc)来配置babel


此时，有2种方法去配置babel-loader 

  • 使用webpack的配置文件
  • 在你的npm脚本中使用  --module-bind

虽然webpack4主打的是0conf概念，但我们可以不通过配置文件设置入口、出口和生产模式、开发模式。这就足够了，有些配置，我们还是需要通过webpack.config.js  来完成。

1.在项目根目录创建webpack.config.js，输入一下内容

  1. module.exports = {
  2. module: {
  3. rules: [
  4. {
  5. test: /\.js$/,
  6. exclude: /node_modules/,
  7. use: {
  8. loader: "babel-loader"
  9. }
  10. }
  11. ]
  12. }
  13. };

然后在index.js中写入一些ES6的代码

  1. const arr = [1, 2, 3];
  2. const iAmJavascriptES6 = () => console.log(...arr);
  3. window.iAmJavascriptES6 = iAmJavascriptES6;

然后执行

  1. npm run build

在./dist/main.js中可以看到代码已被编译为es5语法。

2.如果不通过webpack的配置文件，可以直接修改package.json来完成同样的操作。(webpack3也可以)

  1. "scripts": {
  2. "dev": "webpack --mode development --module-bind js=babel-loader",
  3. "build": "webpack --mode production --module-bind js=babel-loader"
  4. }

8.通过React设置webpack

1.安装React

  1. npm i react react-dom --save-dev

2.安装babel-preset-react

  1. npm i babel-preset-react --save-dev

3.配置.babelrc:

  1. {
  2. "presets": ["env", "react"]
  3. }

4.修改webpack.config.js配置加载器

  1. module.exports = {
  2. module: {
  3. rules: [
  4. {
  5. test: /\.(js|jsx)$/,
  6. exclude: /node_modules/,
  7. use: {
  8. loader: "babel-loader"
  9. }
  10. }
  11. ]
  12. }
  13. };

5.添加React组件

创建./src/App.js

  1. import React from "react";
  2. import ReactDOM from "react-dom";
  4. const App = () => {
  5. return (
  6. <div>
  7. <p>React here!</p>
  8. </div>
  9. );
  10. };
  12. export default App;
  14. ReactDOM.render(<App />, document.getElementById("app"));

并在index.js中引入

  1. import App from "./App";

然后运行“npm run build”

9.HTML webpack 插件

1.安装依赖

  1. npm i html-webpack-plugin html-loader --save-dev

2.编辑修改webpack的配置文件(webpack.config.js)

  1. const HtmlWebPackPlugin = require("html-webpack-plugin");
  3. module.exports = {
  4. module: {
  5. rules: [
  6. {
  7. test: /\.js$/,
  8. exclude: /node_modules/,
  9. use: {
  10. loader: "babel-loader"
  11. }
  12. },
  13. {
  14. test: /\.html$/,
  15. use: [
  16. {
  17. loader: "html-loader",
  18. options: { minimize: true }
  19. }
  20. ]
  21. }
  22. ]
  23. },
  24. plugins: [
  25. new HtmlWebPackPlugin({
  26. template: "./src/index.html",
  27. filename: "./index.html"
  28. })
  29. ]
  30. };

3.创建html文件./src/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <title>webpack 4 quickstart</title>
  7. </head>
  9. <body>
  10. <div id="app">
  11. </div>
  12. </body>
  14. </html>

4.执行

  1. npm run build

查看./dist/index.html ，并通过浏览器打开。

在处理HTML方面没有任何改变。

webpack 4仍然是一个针对Javascript的模块打包器。

但是有计划将HTML作为模块添加（HTML作为入口点）。

10.压缩CSS文件

extract-text-webpack-plugin  不能与webpack 4一起使用。请改用mini-css-extract-plugin。

确保将webpack更新到版本4.2.0。否则，mini-css-extract-plugin将无法使用！

1.安装依赖

  1. npm i mini-css-extract-plugin css-loader --save-dev

2.创建./src/main.css

/* */
/* CREATE THIS FILE IN ./src/main.css */
/* */
body {
line-height: 2;
background-color: chocolate;
}

3.配置webpack.config.js

const HtmlWebPackPlugin = require( "html-webpack-plugin");
const MiniCssExtractPlugin = require( "mini-css-extract-plugin");
module. exports = {
module: {
rules: [
{
test: / \. ( js | jsx ) $ /,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: / \. html $ /,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: / \. css $ /,
use: [ MiniCssExtractPlugin. loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};

4.引用css文件

import style from "./main.css";


运行 "npm run build" 并查看./dist  文件夹。你应该看到由此产生的CSS！

11.webpack dev服务器

使用webpack配置开发服务器只需一分钟。

一旦配置好的webpack dev服务器将在浏览器中启动你的应用程序。

每次更改文件时，它都会自动刷新浏览器的窗口。

要设置webpack dev服务器，请使用以下命令安装软件包：

  1. npm i webpack-dev-server --save-dev
修改webpack配置文件

  1. "scripts": {
  2. "start": "webpack-dev-server --mode development --open",
  3. "build": "webpack --mode production"
  4. }
注意：start必须放在build之前，否则会报错。

然后执行

  1. npm run start







允潇的博客
关注
专栏目录
webpack5常用配置--从零开始学webpack，搭建自己的脚手架
丑小鸭变黑天鹅的博客
04-01 4496
webpack入门学习一、是什么 一、是什么 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 我们来对上面的解释进行拆解： 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具 静态的static：这样表述的原因是我们
webpack-tutorial:从0到1开始学习webpack
03-16
Webpack 是一个流行的JavaScript模块打包工具，它允许开发者将各种资源如JavaScript、CSS、图片等组织成...通过本教程，你将能够从零开始搭建Webpack项目，实现JavaScript资源的管理和优化。开始你的Webpack之旅吧！
从零搭建webpack4
08-10
开箱即用的多页面脚手架, 基于webpack4.2x babel7.1x模块化开发可复用的现代化网站(Without Vue Angular React)
webpack4介绍与总结
weixin_34051201的博客
08-05 356
由于web应用扩展地得极其迅猛，前端技术也是日新月异，前端的苦不是有多难学，而是我刚学完，这东西就被淘汰了（手动哭脸）。框架方面我们有vue、react、angular，我们需要写vue单文件，也需要写jsx语法；js方面我们有Typescript、es6(7、8、9)，现在是每年一个小版本的迭代，语法也是在不断更新和淘汰；模块方面我们有...
【webpack4系列】设计可维护的webpack4.x+vue构建配置（终极篇）
最新发布
mengran_code的博客
09-15 2172
一个模块可能有多个⽅法，只要其中的某个⽅法使⽤到了，则整个⽂件都会被打到bundle ⾥⾯去，tree shaking 就是只把⽤到的⽅法打⼊ bundle ，没⽤到的⽅法会在uglify 阶段被擦除掉。uglify阶段：将 JavaScript代码进行压缩、混淆，并去除一些不必要的代码，从而减小文件体积。webpack4及以上默认内置了，当mode为production情况下默认开启。进行tree shaking条件是必须是 ES6 的语法，CJS 的⽅式不⽀持。
从0开始学习Webpack（一）
weixin_33690963的博客
02-17 136
第一步： 新建一个专门用于学习Webpack的文件夹 在该文件夹内执行 npm init -y 然后执行webpack安装命令 npm install -D webpack webpack-cli 新建目录结构 src 以及src下的文件如图所示 index.js： a.js： 第二步：手动配置webpack 要手动配置webpack ，需要新建一个webpack.config.js文件 c...
从0开始学习webpack打包，效率与性能“快的飞起”
邓占勇的博客
04-21 621
​前言 本篇文章我会带你从0开始学习webpack，这是webpack系列文章的第一篇，后续会持续更新。 为什么会出现模块化开发 模块化，可以说是当下最重要的前端开发范式之一。随着前端应用的日益复杂化，我们的项目已经逐渐膨胀到了不得不花大量时间去管理的程度。而模块化就是一种最主流的项目组织方式，它通过把复杂的代码按照功能划分为不同的模块单独维护，从而提高开发效率、降低维...
webpack 从0开始
qq_39869526的博客
03-26 214
2020年了,再不会webpack敲得代码就不香了(近万字实战) 前言 2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深刻的认识下我们经常打交道的webpack ...
default-webpack4-react-config:具有ESLint + prettier的React App的默认webpack4配置
05-15
通过这个项目，开发者可以快速地搭建一个符合最佳实践的React开发环境，无需从零开始配置Webpack、ESLint 和 Prettier。这个配置模板是学习和理解Webpack工作原理的好起点，也是实际项目开发中可以复用的基础框架。
webpack4-demo:webpack4新配置，多个插件使用
04-29
首先，Webpack 4 引入了一些关键的更新和改进，例如零配置启动（Zero-Config）、更快的构建速度和更好的性能。在零配置启动中，Webpack 提供了一套默认配置，使得开发者可以快速上手，无需编写复杂的配置文件。然而...
vue-cli-webpack:从零开始搭Vue项目
05-09
从零开始搭Vue项目，主要是想脱离对脚手架全家桶的依赖，以及从中深入学习一点webpack相关的知识，不要每次打开package.json以及webpack的配置文件都一脸懵逼。 新建项目 mkdir vue-cli-webpack cd vue-cli-webpack ...
webpack从0开始
weixin_45170918的博客
08-05 270
每次打包会发现dist文件夹里会残留上次打包的文件，这里我们有一个plugin来帮我们在打包输出前清空文件夹clean-webpack-plugin。webpack打包的入口文件为 src/index.js打包输出文件为dist/main.js，如有想要修改可以在根目录下新建。上面我们每次更改文件的时候都需要重新打包，这样会很浪费时间，那我们能不能每次更改文件后会自动打包更新的答案是有的。在上面我们每次打包后都会生成一个js文件，但是我们只是需要在html文件引入js文件。......
webpack 4教程：从0配置到生产模式，你需要知道的都在这里了
qq_34665877的博客
07-13 2119
webpack 4教程：从0配置到生产模式，你需要知道的都在这里了webpack 4作为零配置模块捆绑器webpack功能强大，有很多独特的功能，但其中一个难点是配置文件。为中大型项目提供webpack的配置并不是什么大问题。 然而，对于较小的项目来说，这很麻烦，特别是当你想要启动一些玩具应用时。这就是Parcel得到了很多注意力的原因。Sean和webpack团队改变了这一现状：webpack ...
webpack从0开始搭建项目
喜东东的博客
04-27 254
在网上找教程：https://www.jianshu.com/p/7d3ff74d4b51跟着做了好几遍终于成功
从零玩转Webpack4+实现原理笔记(一)
ME_GIRL的博客
07-10 927
一、webpack 开篇 1.什么是 webpack? webpack 是一套基于 NodeJS 的"模块打包工具", 在 webpack 刚推出的时候就是一个单纯的 JS 模块打包工具,可以将多个模块的 JS 文件合并打包到一个文件中 但是随着时间的推移、众多开发者的追捧和众多开发者的贡献 现在 webpack 不仅仅能够打包 JS 模块, 还可以打包 CSS/LESS/SCSS/图片等其它文件 2.为什么要分模块? 如果将所有的 JS 代码都写到一个文件中, 十分不利于代码的维护和复用 所以我们可以将不
我的webpack，持续更新......
皖林的博客
03-13 2571
压缩js使用自带的webpack.optimize.UglifyJsPluginconst webpack = require('webpack'); module.exports = function(env) { return { entry: { main: './index.js', }, output: { filename: '[chu
webpack4
qq_38210427的博客
05-16 471
为了让浏览器能够正确的解析, 我们需要使用 webpack 将我们的源代码进行打包。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值