首页 > 其他分享 >webpack教程

webpack教程

时间:2023-01-31 16:01:44浏览次数:38  
标签:npm 插件 教程 dev loader webpack css


安装webpack

新建项目的目录,并将命令行切换到该目录下:

mkdir webpackdemo && cd webpackdemo

初始化项目(我们自己开发的npm包,)

npm init -y

把webpack和webpack-cli安装到项目本地

npm install webpack webpack-cli --save-dev

创建webpack配置文件webpack.config.js

echo “Hello Webpack” > webpack.config.js

在package.json文件配置npm scripts

"scripts": {

"build": "webpack --config webpack.config.js"

},

webpack教程_css

调整package.json文件,以便确保我们的项目是private(私有的),并且移除 main 入口

{

"name": "webpackdemo",

"version": "1.0.0",

"description": "webpack指南",

-"main": "index.js",

+"private": true

}

webpack教程_安装插件_02

使用webpack

在webpack.config.js文件中导出一个对象,通过对象中的属性对webpack进行配置:

const path = require('path');



module.exports = {

mode: 'development', // 打包模式,目前配置的是开发模式

entry: './src/index.js', // 入口文件

output: { // 输出文件的配置

filename: 'main.js',

path: path.resolve(__dirname, 'dist')

}

}

webpack教程_css_03

使用loader

由于webpack原始只支持JavaScript的打包,不支持其他文件类型的打包,因此不同类型的文件我们不同的loader来处理它们。

使用css-loader和style-loader处理css文件:

npm install css-loader style-loader 
–save-dev

配置

module: {

rules: [

{

test: /\.css$/,

use: ['style-loader', 'css-loader']

}

]

}

webpack教程_css_04

使用file-loader加载图片

npm install file-loader 
–save-dev

配置file-loader

module: {

rules: [

{

test: /\.css$/,

use: ['style-loader', 'css-loader']

},

{

test: /\.(png|svg|jpg|gif)$/,

use: ['file-loader']

}

]

}

webpack教程_html_05

使用plugin

插件(Plugin)是用来扩展webpack功能的。

HtmlWebpackPlugin

HtmlWebpackPlugin插件默认会生成一个index.html文件,用来替换原有文件,index.html文件的内容也会随着替换而改变。

安装插件

npm install html-webpack-plugin --save-dev

使用插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [

new HtmlWebpackPlugin({

title: 'Home',

filename: 'home.html'

})

]

webpack教程_html_06

CleanWebpackPlugin

该插件会在构建之前清理dist/文件夹。

安装插件

npm install clean-webpack-plugin --save-dev

配置插件

使用devServer

安装webpack-dev-server

npm install webpack-dev-server --save-dev

配置

devServer: {

contentBase: path.join(__dirname, 'dist'),

port: 8080,

index: 'home.html',

hot: true,

open: true,

https: true

}

webpack教程_html_07



标签:npm,插件,教程,dev,loader,webpack,css
From: https://blog.51cto.com/u_15949423/6029739

相关文章

  • Python3网络爬虫教程7——SSL数字证书
    Python全栈工程师核心面试300问深入解析(2020版)----全文预览Python全栈工程师核心面试300问深入解析(2020版)----欢迎订阅上接:Python3网络爬虫教程6——cookie......
  • Python3网络爬虫教程6——cookie & session(cookie的属性,保存及模块的使用)
    Python全栈工程师核心面试300问深入解析(2020版)----全文预览Python全栈工程师核心面试300问深入解析(2020版)----欢迎订阅上接:Python3网络爬虫教程5——ProxyHa......
  • Python3网络爬虫教程5——ProxyHandler处理(代理服务器和代理IP)
    上接:Python3网络爬虫教程4——UserAgent的使用(用户伪装)(附常用的UserAgent值清单[3.ProxyHandler处理(代理服务器)使用代理IP,是爬虫的常用手段服务器有反爬虫手段,使用代......
  • Linux下安装docker教程
    2023新一年啦,今年准备项目部署换成docker,所以现在开始上手在本地部署,本篇文章就是单纯的记录下docker的部署过程,希望能帮助下有需要的人 据了解,docker从17.03版......
  • 下载相关-CH32系列芯片下载方式汇总及教程
    一、CH32Fx系列芯片下载1、ISP下载;2、SWD下载3、脱机烧录器下载;二、CH32Vx系列芯片下载1、ISP下载;2、SWD下载;3、脱机烧录器下载;4、CH32V003下载注意事项;  ......
  • Windows10中macOS10.14虚拟机性能优化教程
    ​​Python全栈工程师核心面试300问深入解析(2020版)----全文预览​​Windows10中采用VMware15安装安装macOS10.14教程虚拟机中masOS运行并不是完美流畅,需要进行性能......
  • windows版redis安装教程
    ***windows版redis安装教程***​​redis安装地址​​下载好redis压缩包后我们将压缩包解压到本地硬盘中,这里我将压缩包解压到D盘中并创建了一个文件叫Redis解压好后打开......
  • Quartz.Net 官方教程 Tutorial 3/3
    Schedule相关属性设置扩展属性方式varhost=Host.CreateDefaultBuilder().ConfigureServices(services=>{services.AddQuartz(opt=>......
  • VUE安装教程+VScode配置
    【手把手教安装】VUE安装教程+VScode配置!!!  原文链接:https://blog.csdn.net/momohhhhh/article/details/126319350含泪整理Vue安装教程因为换了新电脑很多软件要重装,所以......
  • SAP OData 开发实战教程:从入门到提高
    @目录SEGW-GatewayServiceBuilder使用RestfulABAPProgramming编程模型(简称RAP)开发OData服务使用SAPCloudApplicationProgramming编程模型开发OData服......