(一)WebPack4.0 从零开始

一:WebPack基础知识

(1):webpack的定义

webpack官网给出的定义是:webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

(2):webpack的四个核心概念

  • 入口(entry)
  • 输出(output)
  • loader
  • plugins(插件)

本文简单的说一下webpack的四大核心概念,更详细的内容可自行参考webpack的官方文档(https://www.webpackjs.com/concepts/).

入口文件(entry)指的是你的webbpack工程从哪个文件开始构建;输出(output)指的是webpack打包完成后文件输出的位置;loader让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript;        插件(plugins)则用来处理更复杂的一些场景。理解以上四大核心概念对学习webpack会有很好的帮助。

二、webpack项目构建 

首先任意磁盘下

mkdir webpackStudynpm init webpack

在 npm init webpack 会有一些提示 如果你不理解可以一直回车,到结束之后你回头查看下你的文件加下面 会有一个package.json的文件,这个时候我们就可以开始我们的webpack之旅了。当然以上两步你也可以自己新建一个文件夹然后在文件夹下面自己新 建一个package.json。

然后我们需要在根目录下新建 webpack.config.js用以配置我们的webpack。新建一个src文件夹用以放置源码。

(1)、js的打包

在Src下 新建一个index.js的文件 随便写几句测试代码。

然后我们就需要在webpack.congif.js下面做一些简单的配置   (ps:文末有webpack.config.js的整体配置)

const path = require(‘path‘); //node的内置的模块
module.exports = {
    entry: path.resolve(__dirname, ‘src/index.js‘), //__dirname指的是项目的根目录 后面的路径是相对于根目录的路径
    output: {
        filename: ‘bundle.js‘, //输出文件的名字
        path: path.resolve(__dirname, ‘dist‘)
    }
}

配置完成后我们在项目目录下执行命令  webpack 会发现我们的项目文件夹下 多出了一个dist文件夹 ,文件夹下有我们打包后输出的代码 bundle.js;我们把这个js引入到index.html中去,打开Index.html会发现你的代码已经执行了。

(2)、图片以及css的打包

我们在src下 新建一个css文件,然后再Index.js里面引入这个css然后执行webpack 会发现打包的时候报错了

 意思是说我们需要一个loader去加载css的文件。然后我们接下来去安装几个loader :

cnpm i css-loader style-loader  url-loader -D

然后我们去改一下我们的webpack.config.js ,在之前的基础上加上以下的配置。

module: {
        rules: [{
            test: /\.css$/,
            use: [‘style-loader‘, ‘css-loader‘] //cssloader 负责加载css模块
        }, {
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: ‘url-loader‘,
                options: {
                    limit: 6000//是把小于5kb(5*1024)的图片打包成Base64的格式,写入JS
                }
            }]
        }]
    }

配置完成后,我们可以再次执行下webpack,会发现一切正常。我们也可以在src下放两张图片 一张大于5K一张小于5K 去试一下试试有什么区别。我们会发现小于5kb的图片会以base64的格式写入到js中,而大于5kb的图片将会被输出到 dist文件目录下。

(3)plugins 插件的使用 

   webpack提供了非常强大的插件功能,我们可以根据自己的需要去引入自己所需要的插件。本文中就暂时先介绍两个比较实用的插件。分别是 clean-webpack-plugin html-webpack-plugin

首先我们要先安装插件

cnpm  i html-webpack-plugin clean-webpack-plugin -D

然后我们在webpack.config.js 里去配置下

先在webpack.config.js 里面引入两个插件

const { CleanWebpackPlugin } = require(‘clean-webpack-plugin‘)
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)

然后在配置项里加上plugins的配置就可以了

plugins: [
new CleanWebpackPlugin(),//清除每次打包的时候dist 文件夹下的所有文件  重新打包
new HtmlWebpackPlugin({ template:  path.join(__dirname, ‘/index.html‘ })//以指定的路径为模板 复制一个iindex.html 此时打包后的js会自动加载到生成的模板里。
]

我们再次执行后发现,dist文件夹下 已经有了一个index.html 并且打包后的js 已经插入进去了。

  (4)、webpack-dev-server 实现热更新

     以上的基础配置完成后已经能构建一个基础的webpack的项目了,但是每次打包都要重新输入命令就很不方便,这时候就用到了webpack-dev-server 实现热更新,我们文件内容有变化时实现自动重新打包。

首先还是一样的我们先安装 webpack-dev-server

cnpm i webpack-dev-server -D

安装完成后我们只需要在webpack.config.js 下加上一个devServer配置项,然后我们去改一下我们的package.json

webpack.config.js

devServer: {
        contentBase: path.join(__dirname, "dist"),
        port: 9000
    }

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --config webpack.config.js"// 告诉webpack 启用dev命令时 按照哪个配置去打包
  },

然后我们运行 npm run dev 就发现我们的项目已经跑在http://localhost:9000上了。此时一个简单的webpack项目已经搭建好了。

webpack.config.js全部配置

const path = require(‘path‘); //node的内置的模块
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin‘)
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
module.exports = {
    mode: "development",//webpack4.0新增的概念 如果不设置默认为 ‘development‘后续中会介绍
    entry: path.resolve(__dirname, ‘src/index.js‘), //__dirname指的是项目的根目录 后面的路径是相对于根目录的路径
    output: {
        filename: ‘bundle.js‘, //输出文件的名字
        path: path.resolve(__dirname, ‘dist‘)
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [‘style-loader‘, ‘css-loader‘] //cssloader 负责加载css模块
        }, {
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: ‘url-loader‘,
                options: {
                    limit: 40960 //是把小于500B的文件打成Base64的格式,写入JS
                }
            }]
        }]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({ template: ‘./index.html‘ })
    ],
    devServer: {
        contentBase: path.join(__dirname, "dist"), //告诉服务器从哪里提供内容
        port: 9000 //端口号
    }
}

如有错误,欢迎指出!与诸君共勉!!

原文地址:https://www.cnblogs.com/Black-Skin/p/11403720.html

时间: 2024-11-05 20:44:14

(一)WebPack4.0 从零开始的相关文章

Hyperledger Fabric 1.0 从零开始(三)——内网(准离线)环境构建

有公网环境的服务器可以直接看 Hyperledger Fabric 1.0 从零开始(二)--公网环境构建 ,本篇内容与上篇相似,只不过环境搭建需要在内网下,也就是网络被限制的情况下. 1:环境构建与测试 在本文中用到的宿主机环境是Centos ,版本为Centos.x86_647.2,通过Docker 容器来运行Fabric的节点,版本为v1.0.因此,启动Fabric网络中的节点需要先安装Docker.Docker-compose和Go语言环境,然后在网上拉取相关的Docker镜像,再通过配

Hyperledger Fabric 1.0 从零开始(二)——公网环境构建

1:环境构建 在本文中用到的宿主机环境是Centos ,版本为Centos.x86_647.2,通过Docker 容器来运行Fabric的节点,版本为v1.0.因此,启动Fabric网络中的节点需要先安装Docker.Docker-compose和Go语言环境,然后在网上拉取相关的Docker镜像,再通过配置compose文件来启动各个节点. 1.1:Docker安装 进入docker官网 GetDocker ->Centos ->Get CE(社区版)->Get Docker CE o

Hyperledger Fabric 1.0 从零开始(十二)——fabric-sdk-java应用

Hyperledger Fabric 1.0 从零开始(十)--智能合约 Hyperledger Fabric 1.0 从零开始(十一)--CouchDB 上述两章,最近网上各路大神文章云集,方案多多,因为最近工作太忙太忙,我暂时就先不赘述了,后续会提供我参考过的大神文章链接出来. 这章先捡大家都比较在意的java sdk应用方案贴出来,很多朋友都找我要过,我主要是把注释都写进去了,用法简单了说了下,一般情况下会java开发的都能看懂. 年前实在太忙. JAVA-SDK 9.1.基本介绍 官方在

webpack4.0.1安装问题和webpack.config.js的配置变化

The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When using yarn: yarn add webpack-cli -D webpack4.0.1安装问题,提示: The CLI mov

webpack4.0在Mac下的安装配置及踩到的坑

一.什么是webpack是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用.可以将多种静态资源 js.css.less 转换成一个静态文件,减少了页面的请求. ? webpack4.0 安装与环境配置在安装webpack4.0之前,需要安装node,nod

[转]webpack4.0.1安装问题和webpack.config.js的配置变化

本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When usi

webpack4.0打包的时候一些技巧

4.0的webpack要比之前的版本强大的不是一点点 打包的时候也做了很多优化 然后说一些这段时间发现的有趣的技巧 1. 打包出来的文件很大,不知道是什么原因可以用 webpack-bundle-analyzer 很牛逼的分析工具,能知道打包出来的文件的都来自于属什么地方,每个有多大 使用方法很简单 1. 引入 2. 放到插件里 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

webpack4.0各个击破(2)—— CSS篇

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 一. CSS文件基本处理需求 假设项目中的CSS文件均采用预编译语言编写,那么在打包中需要处理的基本问题包括: 预编译语言转换 样式文件挂载方式选择 代码优化(合并及压缩) 去除或保留指定格式的注释 资源定

webpack4.0各个击破(4)—— Javascript & splitChunk

目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 代码混淆压缩 四. 细说splitChunks技术 4.1 参数说明 4.2 参数配置 4.3 代码分割实例 五. 参考及附件说明 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建