Webpack 4 学习02(使用配置文件进行打包)

上一讲中我们打包没有用到webpack.config.js配置文件,webpack4把自己定位为一个零配置的工具。这一讲学习配置文件使用,更好地学习webpack。

上一讲 Webpack 4 学习01(基础配置)

  • 根目录下新建一个webpack.config.js文件 (记载配置信息)

  • 配置文件
     const path = require('path');
    
     module.exports = {
       entry:'./public/index.js',
       output:{
         path:path.resolve(__dirname,'build'),
         filename:'bundle.js'
       }
     }
    字段 意义
    entry 入口,所需打包的文件的路径
    output 出口
    path 文件打包后存放的路径
    path.solve() 将路径或者路径片段的序列处理成绝对路径
    _dirname 表示当前文件所在目录的绝对路径
    filename 打包后文件的名称
  • 按照配置项新建一个入口文件public/index.js

  • 运行npm run dev

原文地址:https://www.cnblogs.com/hunterxing/p/10425286.html

时间: 2024-08-17 08:06:21

Webpack 4 学习02(使用配置文件进行打包)的相关文章

Webpack 4 学习07(提取分离打包css)

前面讲过 将css文件引入到js文件中,然后一起打包成js文件,现在我们学习单独提取分离css并且打包. 安装插件min-css-extract-plugin npm install mini-css-extract-plugin --save-dev 配置webpack.config.js 引入插件 const MiniCssPlugin = require("mini-css-extract-plugin"); rules 设置 { test:/\.css$/, use:[Mini

Webpack 4 学习04(配置webpack-dev-server)

前提: Webpack 4 学习01(基础配置) ? Webpack 4 学习02(通过配置文件打包) 一.了解 webpack-dev-server webpack-dev-server用来配置本地服务器 为 webpack 打包生成的文件提供web服务 自动刷新和热替换(HMR) 二.安装webpack-dev-server npm install --save-dev webpack-dev-server 三. 配置webpack.config.js文件 devServer:{ conte

Webpack 4 学习09(打包生成html)

所需插件 html-webpack-plugin 本教程基于已经搭建好的webpack环境,详见Webpack 4 学习01(基础配置) **了解html-webpack-plugin** HtmlWebpackPlugin会自动为你生成一个HTML文件,根据指定的index.html模板生成对应的 html 文件. 安装依赖 npm install html-webpack-plugin --save-dev 配置webpack.config.js文件 在头部定义常量,引入插件 const H

【Webpack】学习随笔

参考链接:http://www.runoob.com/w3cnote/webpack-tutorial.html Webpack 是一个前端资源加载/打包工具. Webpack 可以将多种静态资源 js.css.less 转换成一个静态文件,减少了页面的请求. 1.1使用淘宝 NPM 镜像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 1.2使用 cnpm 安装 webpack cnpm install webp

JavaEE学习之Maven配置文件pom.xml详解(转)

一.引言 (本文转载自:http://blog.csdn.net/longeremmy/article/details/9670619) 使用maven有一些时间了,一直没有好好将pom配置文件每个节点的意义好好了解一番.今天突然想来了解下:pom- project object model 项目对象模型.顾名思义,他是用来描述项目信息的,以及构建方式,依赖等.网上有一篇文章写的很详细,这里就借用一下,以备日后使用. 二.详解 1 <project xmlns="http://maven.

设计模式学习02—工厂模式

1.动机与定义 我们在程序中使用一个对象时,需要new一下,如果需要设置其他值就再初始化一下.比如我要使用一个按钮,手动new一个矩形按钮,然后初始化一些值,如显示文字,背景色等. // 矩形按钮 IButton btn = new RecButton(); // 初始化其他值 btn.setText("提交"); btn.setBackgroundColor("#00aaff"); // 其他初始化省略 // 圆形按钮 IButton btn2 = new Rou

libgdx学习记录19——图片动态打包PixmapPacker

libgdx中,opengl 1.x要求图片长宽必须为2的整次幂,一般有如下解决方法 1. 将opengl 1.x改为opengl 2.0.(libgdx 1.0版本后不支持1.x,当然不存在这个问题,这里针对的是0.9.9版本) 2. 使用TexturePacker将图片打包好然后作成一张大图添加进来. 第二种方法是常用方法,但是不太灵活,添加.删除某些图片不太方便,改动较大.这里可以考虑使用PixmapPacker将图片进行动态打包. 主要方法: pack(String name, Pixm

ThinkPhp学习02

原文:ThinkPhp学习02 一.什么是MVC                M -Model 编写model类 对数据进行操作 V -View  编写html文件,页面呈现 C -Controller 编写类文件(UserAction.class.php)二.ThinkPHP的MVC特点        三.ThinkPHP的MVC对应的目录    M 项目目录/应用目录/Lib/Model V 项目目录/应用目录/Tpl C 项目目录/应用目录/Lib/Action四.url访问C     

JAVA学习笔记 -- 把资源文件打包到jar包

初学GUI,用Eclipse导出jar包,设定的最小化图标不能显示(hello.png文件放在项目的根目录下).代码如下: import javax.swing.JFrame; import java.awt.Toolkit; import java.awt.Image; import java.net.URL; public class GUITest { public static void main(String[] args) { JFrame frame = new JFrame();