webpack4开始使用

全文字数： 365

2分钟

webpack4在打包速度上有了明显的提高，比如文件代码的改变通过websock推送通知页面刷新。webpack4可以不要任何的配置文件，即可通过命令完成打包，下面进行简单的介绍。

初始化项目

npm init -y

安装依赖

npm install webapck

npm install webpack-cli

首先需要在当前目录建一个src文件夹，然后在src文件夹中建index.js文件，该文件就是我们的入口文件。开始的准备工作已经完成，下面就可以打包了。

开始打包

npx webpack

除了通过上面的命令，还可以在package.json文件中配置脚本来运行命令，具体方式如下

在package,json中配置

"scripts": {

"build": "webpack --mode development"

运行命令

npm run build

在webpack中使用默认的配置进行打包往往满足不了项目的需要，这个时候我们需要自定义自己的配置文件。

建立webpack.config.js文件，开始处理css文件，需要安装style-loader和css-loader模块

const path = require('path')

module.exports = {

module: {

rules: [

{

test: /\.css$/,

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

}

]

}

往往我们处理css还不够，还需要处理html文件，需要安装html-webpack-plugin

const path = require('path')

module.exports = {

module: {

rules: [

{

test: /\.css$/,

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

}

]

plugins: [

new HtmlWebpackPlugin({

template: './src/index.html',

filename: 'index.html',

minify: {

removeAttributeQuotes: true

}

})

]

}

《前端精髓》

019月

深入理解Date对象

288月

如何更好地利用JavaScript数组

webpack4开始使用相关推荐

Webpack4 学习笔记 - 01：webpack的安装和简单配置
安装 webpack 新建一个Demo文件夹,执行初始化: npm init 在Demo文件夹里安装 webpack 和 webpack-cli : npm install webpack webpa ...
webpack4升级指北
最近发现还是有听过人看这篇文章,所以再来更新一下.首先现在webpack4已经稳定,各个插件和loader基本上直接装都可以版本匹配,比如html-webpack-plugin,如果有不匹配的看pee ...
webpack4.x配置
总结下自己的配置的webpack,希望能帮助到大家同时也给自己做个笔记. 1.第一步配置前,我们新建一个文件夹"project",打开cmd命令输入 npm init 初 ...
webpack4.0打包优化策略(二)
打包优化策略 webpack4.0打包优化策略(一) webpack4.0打包优化策略(二) webpack4.0打包优化策略(三) 区分开发和生产环境通常我们在开发网页时需要区分构建环境开发环境 ...
进击webpack4 （优化篇）
进击webpack 4 (基础篇一) 进击webpack4 (基础篇二:配置一) 进击webpack4 (基础篇三:配置二) 不解析不依赖第三方模块的模块 noParse 有一些第三方模块,它本身 ...
webpack4 系列教程: 前言
1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的帮助下,开发者可以轻松地实现加密代码.多平台兼容.而最重要的是,它为前端工程化提供了最好支持.vue.react等大型 ...
webpack4.0让编译速度飙升
前端开发一个crm项目的时候,因为项目内容比较庞大,导致webpack编译和打包都巨慢,实在是影响开发效率,所以着手升级webpack. webpack4-es6-react webpack4-es6 ...
手摸手入门前端--01.webpack4
1.webpack基本概念 0配置 webpack4现在是支持0配置的基本概念 entry output loader plugins mode file module chunks compile ...
js知识点掘金_关于webpack4的14个知识点，童叟无欺
没有什么比时间更具有说服力了,因为时间无需通知我们就可以改变一切. 最近工作中用到了nuxt,才发现,如果webpack学的6,nuxt基本不需要学习,没什么学习成本的,因此,这篇重新记录下webpa ...
webpack4.0--如何安装和配置（一）
前言一直计划想把webpack系统的学一遍,现在终于开始了,接下来会分享我从零开始学习的过程,记录自己,分享他人,这篇文章主要分享安装和配置,也就是文档中Getting Started的学习. 如何 ...

webpack4开始使用

webpack4开始使用相关推荐

最新文章

热门文章